Блог

Я пытался выяснить, как закрыть модал, который я создал, щелкнув по окну, но безуспешно. Мой модальный активируется путем добавления класса и удаления класса ‘show-modal’. Итак, я создал прослушиватель событий window, и кажется, что всякий раз, когда я нажимаю тег «a» в моем HTML, он также рассматривает этот щелчок как часть окна, поэтому модальное окно даже не открывается.

Однако, как только я удаляю прослушиватель событий window, модал работает нормально; но модал не закрывается, пока я не нажму кнопку «closeModal».

Есть ли что-то, что я делаю неправильно или улучшаю? Я пытался поискать в Google, но их идея отличается от моей.

Я знаю, что могу сделать это с помощью React amp; Boostrap, но я также пытаюсь изучить ванильный способ JS, поэтому я хочу сделать это правильно!

 const contact = document.querySelector('.contact');
const modal = document.querySelector('.modal');
const closeModal = document.querySelector('.closeBtn');

contact.addEventListener('click', showModal);
closeModal.addEventListener('click', modalClose);
window.addEventListener('click', modalClose);

function showModal(){
    modal.classList.add('show-modal');
    console.log('clicked')
}

function modalClose(){
    modal.classList.remove('show-modal');
    console.log('closed')
}


 

Одним из способов обойти это было бы добавить «подложку» к модальному и прослушивать клики по нему вместо элемента window.

Также мне нравится добавлять модальный открытый класс body , чтобы было легко настроить стиль как для модального, так и для модального подложки.

 document.querySelector('button#open').addEventListener('click', e => {
  document.body.classList.add('show-modal')
})

document.querySelector('button#close').addEventListener('click', e => {
  document.body.classList.remove('show-modal')
})

document.querySelector('.underlay').addEventListener('click', e => {
  document.body.classList.remove('show-modal')
}) 

 .modal {
  height: 100px;
  width: 100px;
  background-color: white;
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.underlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.show-modal .modal {
  display: block;
}

.show-modal .underlay {
  display: block;
} 

 <button id="open">Open Modal</button>
<div class="underlay"></div>
<div class="modal">
  <button id="close">Close Modal</button>
</div>
</div> 

Вы можете использовать event.stopPropagation(), чтобы избежать распространения событий, попробуйте это:

 function showModal(){
    event.stopPropagation();
    modal.classList.add('show-modal');
    console.log('clicked')
}