Мне необходимо, чтобы попап закрывалася
- через кнопку закрытия - работает
- через нажатую клавишу Esc - работает
- через нажатие вне попапа, то есть на оверлей - не работает
Многие советовали использовать общую кнопку для закрытия попапов ( у меня их 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);
}
}