Показать сообщение отдельно
  #4 (permalink)  
Старый 02.03.2024, 03:22
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,802

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

С вашим кодом любой клик по контенту попапа приведет к его закрытию, т.к. `.popup_bg` - родительский контейнер для всего его содержимого, у меня не просто так вместо метода `closest` использовался `matches`.

window.addEventListener("click", e => {
  if (e.target.closest(".close-popup") || e.target.matches(".popup__bg")) {
    e.target.closest("[data-popup]").classList.remove("active");
  }

  const openPopupNode = e.target.closest("[data-popup-id]");
  if (openPopupNode) {
    const popupId = openPopupNode.dataset.popupId;
    
    document.querySelector(`[data-popup="${popupId}"]`)?.classList.add("active");
  }
});
Ответить с цитированием