Проблема с закрытием попапа

N

Пользователь

от NesTraGon , в категории: HTML/CSS , 7 месяцев назад

У меня возникла проблема, даже не знаю как ее описать, но попробую.

При моих скудных (умственных) способностях, был написан сайт, в котором присутствует один попап, который я сделал в виде отдельного файла html, так как у меня несколько страничный сайт. Такой вариант, как мне кажется, является оптимальным, чтобы не вписывать попап в каждую страницу.

Данный попап является окном регистрации. я еле как разобрался как его вообще реализовать (через тег Iframe).

Ну и можно подумать: "Так в чем проблема, тупой школьник во всем разобрался, молодец". А вот проблема заключается в том, что я не понимаю как этот "попыт" закрывать.

У меня присутствует 2 css файла. Один для всего, а второй как раз для окна регистрации.

Вот так выглядит код для iframe:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
.regwin{
    border: 0;
    outline: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 5;
    opacity: 0;
    visibility: hidden;

}

.regwin:target{
    opacity: 1;
    visibility: visible;

}    

То есть, при ссылке сайт становиться видимым и осезаемым для пользователя.

Как теперь вернуть opacity и visibility к предыдущим значениям, при условии того, что нажатие происходит на новом сайте.

Можете подсказать, что делать или как можно упростить?😅


Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jaren , 7 месяцев назад

@NesTraGon Вы можете добавить кнопку "Закрыть" внутри самого попапа. Вот как это можно сделать:

1
2
3
<iframe class="regwin" id="registrationPopup" src="ссылка_на_содержимое_попапа.html">
  <button id="closePopup">Закрыть</button>
</iframe>


Чтобы добавить функциональность закрытия попапа при нажатии на кнопку "Закрыть". Добавьте JavaScript код в ваш файл:

1
2
3
4
5
6
7
8
9
document.addEventListener("DOMContentLoaded", function () {
  const closePopupButton = document.getElementById("closePopup");
  const registrationPopup = document.getElementById("registrationPopup");

  closePopupButton.addEventListener("click", function () {
    registrationPopup.style.opacity = 0;
    registrationPopup.style.visibility = "hidden";
  });
});