Как сделать закрытие модального окна при нажатии вне его области?

Question

[Владислав Михеев]

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

Answer 1

[Andrey K.]

Если нужно быстрое решение без изменения существующей структуры модального окна, то в функции closeModal для modalContent добавьте addEventListener на click и остановите всплытие данного события выше к родителю через event.stopPropagation();

Comments

[Владислав Михеев]

Правильно ли я Вас понял?

function closeModal() {
  const modal = document.querySelector('.modal.show');
  const modalContent = modal.querySelector('.modal-content');

  modalContent.addEventListener('click', (event) => {
    event.stopPropagation();
  });

  modalContent.classList.remove('show');
  modal.addEventListener('transitionend', () => {
    modal.classList.remove('show');
  });
}

Если да, то это помогло лишь частично. Теперь при первом открытии окна , оно закрывается при нажатии на контент, при повторном открытии окна, уже не закрывается и так для каждого

[Andrey K.]

Владислав Михеев, согласен. Если перенести данный обработчик (addEventListener) в функцию openModal, то такой проблемы уже не будет.

[Владислав Михеев]

Andrey K., спасибо, это действительно помогло.

[ProjectSoft]

Владислав Михеев, лучше всего использовать делегирование событий.

Answer 2

[pLavrenov]

За слоем с модальным окном должен быть прозрачный (или не прозрачный) слой на весь экран и по клику на него закрывать.

Comments

[Владислав Михеев]

Такой слой имеется, modal, но почему-то окно закрывается, по клику по объекту который находится поверх слоя modal, скорее всего я сделал что-то не так