0

Сделал модальное окно, для закрытия добавил svg картинку, при клике которой должно закрываться это окно путем удаления CSS класса modal_active. Но почему то он его не удаляет, или удаляет и вновь создает, в чем проблема?

const openModalWindow = () => {
  const onlineList = document.querySelector(".onlineUser");
  const modalWindow = document.querySelector(".modalWindowList");
  if (!onlineList || !modalWindow)
    return;
  onlineList.addEventListener("click", (e) => { // при клике на надпись Online
    e.preventDefault();
    modalWindow.classList.add("modal_active"); // добавляем класс modal_active
  });
};
openModalWindow();

const closeModalWindow = () => {
  const modalWindow = document.querySelector(".modalWindowList");
  const closeWindow = document.querySelector(".closeButton");

  closeWindow.addEventListener("click", (e) => { // при клике на картинку крестика 
    e.preventDefault();
    modalWindow.classList.remove("modal_active"); // удаляем класс modal_active
  });
};
closeModalWindow();
.modalWindowList {
  opacity: 0;
}

.modal_active {
  visibility: visible;
  opacity: 1;
}
<div class="onlineUser">&#9776; Online list
  <div class="modalWindowList">
    <div class="modalBody">
      <div class="closeButton">X</div>
      <div class="onlineList"><span class="textOnline">Online</span>
        <div class="usersList"></div>
      </div>
    </div>
  </div>
</div>

1
  • .closeButton у вас расположен внутри .onlineUser, поэтому когда вы кликаете по кнопке закрытия модального окна, вы незаметно для себя кликаете и по кнопке открытия.
    – Pilaton
    15 янв 2022 в 1:02

1 ответ 1

0

У тебя не объявлен слушатель до тех пор пока не вызовется какая либо из двух функций (openModalWindow или closeModalWindow).

Я предлагаю тебе такую реализацию без функций вовсе:

  const onlineList = document.querySelector(".onlineUser");
  const modalWindow = document.querySelector(".modalWindowList");

  let opened = false

  onlineList.addEventListener("click", (e) => {
    if (opened) {
      modalWindow.classList.add("modal_active");
    } else {
      modalWindow.classList.remove("modal_active");
    }
    opened = !opened;
  });

И проверь с помощью console.log(onlineList) добавился ли ли объектов в константу, если не отработает. В таком случае тебе нужно будет объявить JS после того как отрисуется HTML, просто напиши JS в самом конце файла.

Ваш ответ

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

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