Проблема с закрытием попапа
У меня возникла проблема, даже не знаю как ее описать, но попробую.
При моих скудных (умственных) способностях, был написан сайт, в котором присутствует один попап, который я сделал в виде отдельного файла 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 к предыдущим значениям, при условии того, что нажатие происходит на новом сайте.
Можете подсказать, что делать или как можно упростить?😅
1 ответ
@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"; }); }); |