Как закрыть данный попап при клике вне него?

Question

[anmkh]

const hamb = document.querySelector("#hamb");
const navbar = document.querySelector("#navbar");
const popup = document.querySelector("#popup");
const menu = document.querySelector("#menu");
const menuCity = document.querySelector(".menu-city");
const headerPhone = document.querySelector(".header__phone").cloneNode(1);
const socialLinks = document.querySelector(".footer__social_links").cloneNode(1);
const btnBrand = document.querySelector(".btn_brand").cloneNode(1);
const body = document.body;


hamb.addEventListener("click", hambHandler);

function hambHandler(e) {
  e.preventDefault();
  popup.classList.toggle("open");
  hamb.classList.toggle("--openmenu")
  navbar.classList.toggle("--openmenu")
  body.classList.toggle("noscroll")

  renderPopup();

}


function renderPopup() {
  const width = window.innerWidth
  if (width < 1269){
    popup.appendChild(menu);
  }
  if (width < 991){
    popup.appendChild(menuCity);
  }

  popup.appendChild(headerPhone);
  popup.appendChild(socialLinks);
  popup.appendChild(btnBrand);

}

Comments

[ksnk]

Добавь в функцию renderPopup в конец что-то такое

...
popup.appendChild(btnBrand);
//
      var mouseupHandler=function (e) {
        if (!popup.contain(e.target)) {
            document.removeEventListener("mouseup", mouseupHandler);
            popup.classList.remove("open");
        }
    };
    document.addEventListener("mouseup",mouseupHandler,true);
}

Ну а потом покликай на кнопку быстро несколько раз и пойми сам в чем еще ты не прав...

Answer 1

[Илья Корень]

Вариантов несколько и подобные вопросы есть, загуглите при желании.
А так, как делал я:
1. делаешь обертку вокруг попапа, задаешь ему width: 100%, height: 100%, чтобы занимал весь экран.
2. Див должен быть по z-index выше этого попапа.
3. Вешаешь обработчик клика на див-обертку и закрываешь попап.

Comments

[anmkh]

Обертке нужно дать позиционирование, у меня в этом случае сам попап улетает с позиции

Answer 2

[Владимир Шаблий]

Можно готовое слямзить, в бутстрапе например: