-1

я новичок, и хочу сделать попап следующим образом: по дефолту на попапе display:none; а при клике на кнопку display меняется на flex, потом если flex то при клике на окно(попап) он снова возвращается в none

let popupContainer = document.querySelector(".registration__popup-container");
let popup = document.querySelector(".registration__popup");
const openPopup = document.querySelectorAll(".button__reg");

for (let i = 0; i < openPopup.length; i++) {
  openPopup[i].addEventListener('click', function() {
    popupContainer.style.display = "flex";
  });
  if (popupContainer.style.display = "flex") {
    popupContainer.addEventListener('click', function() {
      popupContainer.style.display = "none";
    });
  };
};
.registration__popup-container {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
}
<div class="registration__popup-container">
  <div class="registration__popup">
    <h3 class="registration__popup-title">Ваша заявка<br>успешно отправлена!</h3>
    <img class="popup-сheck-img" src="image/pop-up_reg.svg"></img>
  </div>
</div>

Вот только когда я обновляю страницу попап сразу появляется(то есть он сразу flex) хотя в коде none. Может кто скажет почему так, или есть другие похожие варианты реализации?

ksa
  • 6,872
Данила
  • 19
  • 4
  • 1
    Потому что в строке if(popupContainer.style.display = "flex"){ вы сразу же присваиваете новый стиль без каких-либо предварительных условий – andreymal Jan 08 '23 at 15:20

1 Answers1

0

popupContainer.style.display = "flex" - это не сравнение, а присваивание значения Для сравнения используйте операторы == или ===

Подробнее об операторах сравнения

let popupContainer = document.querySelector(".registration__popup-container")
const openPopup = document.querySelectorAll(".button__reg")

openPopup.forEach(btn => btn.addEventListener('click', () => popupContainer.style.display = "flex"))


popupContainer.addEventListener('click', () => popupContainer.style.display = "none")
Evgen Nuzhdoff
  • 1