0

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

  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

1 ответ 1

0

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

popupEditProfile.addEventListener("click", (evt) => {
  if (evt.currentTarget === evt.target) {
    closePopup(popupEditProfile)
  }
})

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.