Блог

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

Вот мой HTML:

 <section class="portfolio">
        <h1>Portfolio</h1>
<div class="projects">
            <div data-modal="modal1">
                <div>
                      <p>Coffee</p>
                </div>
                <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="">
              </div>
            <div data-modal="modal2">
                <div>
                       <p>Tea</p>
                </div>
                <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/tea-cup-bag-high-res-stock-photography-1570544677.jpg" alt="">
               </div>
           <div data-modal="modal3">
                <div>
                       <p>Kava</p>
                </div>
                <img src="https://www.kanata-entreprises.com/wp-content/uploads/2014/03/the-tisanes.jpg" alt="">
               </div>
          </div>

<div class="project-card hidden" id="modal1">
            <button class="close">X</button>
        <div class="overlay">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="">
        </div>
       </div>
        
<div class="project-card hidden" id="modal2">
            <button class="close">X</button>
        <div class="overlay">
            <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/tea-cup-bag-high-res-stock-photography-1570544677.jpg" alt="">
        </div>
</div>
  <div class="project-card hidden" id="modal3">
            <button class="close">X</button>
        <div class="overlay">
            <img src="https://www.kanata-entreprises.com/wp-content/uploads/2014/03/the-tisanes.jpg" alt="">
        </div>
</div>
</section>
 

Вот js-код для открытия модального:

 const coffeeGrounds = document.querySelectorAll('.projects > div[data-modal^=modal]');
const closeBtn = document.querySelectorAll('.close');
const allModals = document.querySelectorAll('.project-card');

// Open Modals
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');
       
    });
}
 

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

 // when clicked outside to close the modal:
window.addEventListener('click', function(e) {
    
    if (!e.path.some(x => x.className amp;amp; x.className.includes('project-card'))) {
        allModals.forEach(x => x.style.display = 'none');
    }
  }, true)
 

Пожалуйста, любая помощь будет оценена. Не стесняйтесь оптимизировать мой код.
Вот визуальное представление: Codepen

Ну, вы могли бы взять свою закрытую модальную функцию, а затем просто применить ее, прежде чем показывать новую модальную. Итак, идея в том, чтобы — скрыть все модальные -> показать модальный x.

 const coffeeGrounds = document.querySelectorAll('.projects > div[data-modal^=modal]');
const closeBtn = document.querySelectorAll('.close');
const allModals = document.querySelectorAll('.project-card');

const hideModals = (e) => {
    if (!e.path.some(x => x.className amp;amp; x.className.includes('project-card'))) {
        allModals.forEach(x => x.style.display = 'none');
    }
};

// Open Modals
for (var i = 0; i < coffeeGrounds.length; i  ) {
    coffeeGrounds[i].addEventListener('click', function (e) {
        hideModals(e);
        var x = this.getAttribute('data-modal');
        var a = document.getElementById(x);
        a.setAttribute('style','display:block');
       
    });
}