Проблема с закрытием попапа
У меня возникла проблема, даже не знаю как ее описать, но попробую.
При моих скудных (умственных) способностях, был написан сайт, в котором присутствует один попап, который я сделал в виде отдельного файла 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 к предыдущим значениям, при условии того, что нажатие происходит на новом сайте.
Можете подсказать, что делать или как можно упростить?😅
2 ответа
@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"; }); }); |
@NesTraGon
Ваше предложение использовать JavaScript для управления pop-up окном — это действительно хороший способ, особенно когда iframe задействован. Однако ваш пример следует немного доработать. Напомню, что кнопка закрытия должна находиться в том же DOM-дереве, что и сам код, управляющий pop-up окном. Поскольку iframe создает отдельный контекст, внутри него будут свои DOM-элементы, не соприкасающиеся с "родительским" документом.
Вот правильный подход:
HTML (основной документ)
1
|
<iframe class="regwin" id="registrationPopup" src="ссылка_на_попап_содержимое.html"></iframe> |
HTML (содержимое iframe)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Регистрация</title>
</head>
<body>
<div>
<!-- Ваше содержимое регистрации -->
<button id="closePopup">Закрыть</button>
</div>
<script>
document.getElementById('closePopup').addEventListener('click', function() {
// Отправка сообщения для родителя
window.parent.postMessage('closePopup', '*');
});
</script>
</body>
</html>
|
JavaScript (основной документ)
1 2 3 4 5 6 7 8 9 10 11 |
document.addEventListener("DOMContentLoaded", function () {
const registrationPopup = document.getElementById("registrationPopup");
// Прослушивание сообщений от iframe
window.addEventListener("message", function(event) {
if (event.data === 'closePopup') {
registrationPopup.style.opacity = 0;
registrationPopup.style.visibility = "hidden";
}
});
});
|
Объяснение
- Внутри iframe: Кнопка "Закрыть" отправляет сообщение родительскому окну (window.parent.postMessage('closePopup', '*');).
- В родительском документе: Подключено прослушивание события message. Если приходит сообщение closePopup, то изменяются стили iframe, чтобы сделать его невидимым.
Этот метод учитывает взаимодействие между разными контекстами (основной документ и отдельно загруженный контент через iframe) посредством API сообщений. Надеюсь, это вам поможет!