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

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

Дополнительно:

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

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

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

  1

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

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

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

Ответы:

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

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