Как сделать закрытие popup с помощью нажатия на overlay и общую кнопку закрытия?

Мне необходимо, чтобы попап закрывалася

  1. через кнопку закрытия - работает
  2. через нажатую клавишу Esc - работает
  3. через нажатие вне попапа, то есть на оверлей - не работает Многие советовали использовать общую кнопку для закрытия попапов ( у меня их 2 в проекте) и туда приделать закрытие через оверлей, пока все не получается и не пойму почему. ошибки в консоли Сроки,на котрые ругается браузер это как раз функция закрытия с описанием попап и где используется в открытии попапа
//функция открытия, если попап открыт, добавляем слушателя клавиатуры
function openPopup(popup) {
  popup.classList.add('popup_opened');
  document.addEventListener('keydown', closePopupEsc);
  popup.addEventListener('click', closePopupOverlay);
}

//функция закрытия, если попап закрыт, то удаляем слушателя клавиатуры
function closePopup(popup) {
  popup.classList.remove('popup_opened');
  document.removeEventListener('keydown', closePopupEsc);
  popup.removeEventListener('click', closePopupOverlay);
}


//новая функция для закрытия попапа при нажатии на оверлей (не работает)
function closePopupOverlay(evt) {
  if (evt.target === evt.currentTarget) {
    const popup = document.querySelector(selector.openPopup);
    closePopup(popup);
  }
}

//не работает
const closePopupButtons = document.querySelectorAll(selector.closePopupButton);
closePopupButtons.forEach((button) => {
  const popup = button.closest('.popup');
  button.addEventListener('click', () => { closePopup(popup); });
  popup.addEventListener('click', (evt) => { closePopupOverlay(evt); });
});

/*функция закрытия при нажатии на Esc: если значение нажатой кнопки Esc
то находим переменную с селектором открытого попапа и закрываем его*/
function closePopupEsc(evt) {
  if (evt.key === 'Escape') {
    const popup = document.querySelector(selector.popupOpen);
    closePopup(popup);
  }
}

введите сюда описание изображения


Ответы (1 шт):

Автор решения: Вадим

Можно повесить так например на сам попап

popupEditProfile.addEventListener("click", (evt) => {
  if (evt.currentTarget === evt.target) {
    closePopup(popupEditProfile)
  }
})
→ Ссылка