Блог

Я пытаюсь закрыть модальный при щелчке снаружи. Я пытался перебирать модалы, но не могу заставить их установить для его отображения значение none.

Вот мой HTML:

 <div class="projects">
            <div data-modal="modal1">
                <div>
                      <p>Coffee</p>
                </div>
                <img src="img/coffee.png" alt="">
            </div>
            <div data-modal="modal2">
                <div>
                       <p>Tea</p>
                </div>
                <img src="img/tea.png" alt="">
            </div>
      </div>

<div class="project-card" id="modal1">
            <button class="close">X</button>
        <div class="overlay">
            <img src="img/coffee.png" alt="">
        </div>
</div>
        
<div class="project-card" id="modal2">
            <button class="close">X</button>
        <div class="overlay">
            <img src="img/tea.png" alt="">
        </div>
</div>
 

Вот мой код для открытия модальных файлов.

 const coffeeGrounds = document.querySelectorAll('.projects > div[data-modal^=modal]');
for (var i = 0; i < coffeeGrounds.length; i  ) {
    coffeeGrounds[i].addEventListener('click', function () {
        var x = this.getAttribute('data-modal');
        var a = document.getElementById(x);
        a.setAttribute('style','display:block');
       
    });
}

 

Вот мой код, при щелчке снаружи, чтобы закрыть модальный:

 window.addEventListener('click',function(){
    
   for(var i = 0; i<coffeeGrounds.length; i  ){
         var x = coffeeGrounds[i].getAttribute('data-modal');
             var a = document.getElementById(x);
                console.log(a);
                if(a.style.display === 'block'){
                      a.setAttribute('style','display:none');
                 }
             }
        });
 

Здесь, установив для модального отображения значение none. Он также задерживается для отображения модального.

Пожалуйста, любая помощь будет оценена.

Codepen: https://codepen.io/zaidik/pen/bGwpzbE

Когда вы щелкаете за пределами модального окна, у вас не должно быть модального окна в массиве распространения событий

Другими словами, воспользуйтесь событием.свойство path

Рабочий пример (на основе предоставленной скрипки)

   window.addEventListener('click', function(e) {
  const allModals = document.querySelectorAll('.project-card');
  if (!e.path.some(x => x.className amp;amp; x.className.includes('project-card'))) {
    allModals.forEach(x => x.style.display = 'none');
  }
}, true)
 

Пример рабочей скрипки: https://jsfiddle.net/7pzs1042 /