Модальное окно
Доброго времени суток, знаю, что эту тему уже заюзали, но все же попрошу помощи))
У меня на сайте есть несколько модальных окон, которые вызываются по id через атрибут href в ссылке с классом .open_modal. <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="#big_modal" class="open_modal"></a> <a href="#min_modal" class="open_modal"></a> <div id="big_modal"></div> <div id="min_modal"></div> </body> </html> Накропал такой вот скриптик для их открытия: var overlay = document.querySelector('#overlay'); var open_modal = document.querySelector('.open_modal'); var close = document.querySelector('#close'); var modal = document.querySelector('.modal_zakaz'); var body = document.body; var html = document.documentElement; var div = open_modal.getAttribute('href'); var modal_block = document.querySelector(div); open_modal.onclick = function openModal() { event = event || window.event; if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } html.classList.add('overflow'); body.classList.add('overflow'); overlay.style.display = "block"; fadeOverlay(overlay,500,40); modal_block.style.display = "block"; modal_block.classList.add('modal_zakaz_up'); fadeIn(modal_block,500,40); } close.onclick = function closeModal(){ html.classList.remove('overflow'); body.classList.remove('overflow'); if ( modal_block.classList.contains('modal_zakaz_up')) { modal_block.classList.toggle('modal_zakaz_up'); modal_block.classList.toggle('modal_zakaz_down'); fadeOut(modal_block,500,40); } setTimeout( function () { if (modal_block.classList.contains('modal_zakaz_down')) { modal_block.classList.toggle('modal_zakaz_down'); } },1000 ) fadeOut(overlay,700,40); function closeOverlay(event) { overlay.style.display = "block"; } setTimeout(closeOverlay() ,500); } Но он отрывает только первую ссылку с классом .open_mоdal которую видит на странице, а другие игнорирует, подскажите как дописать скрипт , что бы он работал со всеми модальными окнами на странице. |
l_mke,
циклом по всем ссылкам с '.open_modal' вместо строки 2. for(const open_modal of document.querySelectorAll(".open_modal")) { ... let div = open_modal.getAttribute('href'); ... open_modal.onclick... .... } |
Если я правильно понял, то надо было сделать так :
for(const open_modal of document.querySelectorAll(".open_modal")){ var overlay = document.querySelector('#overlay'); var close = document.querySelector('#close'); var modal = document.querySelector('.modal_zakaz'); var body = document.body; var html = document.documentElement; let div = open_modal.getAttribute('href'); var modal_block = document.querySelector(div); open_modal.onclick = function openModal() { event = event || window.event; if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } html.classList.add('overflow'); body.classList.add('overflow'); overlay.style.display = "block"; fadeOverlay(overlay,500,40); modal_block.style.display = "block"; modal_block.classList.add('modal_zakaz_up'); fadeIn(modal_block,500,40); } close.onclick = function closeModal(){ html.classList.remove('overflow'); body.classList.remove('overflow'); if ( modal_block.classList.contains('modal_zakaz_up')) { modal_block.classList.toggle('modal_zakaz_up'); modal_block.classList.toggle('modal_zakaz_down'); fadeOut(modal_block,500,40); } setTimeout( function () { if (modal_block.classList.contains('modal_zakaz_down')) { modal_block.classList.toggle('modal_zakaz_down'); } },1000 ) fadeOut(overlay,700,40); function closeOverlay(event) { overlay.style.display = "block"; } setTimeout(closeOverlay() ,500); } overlay.onclick = function closeModal(){ html.classList.remove('overflow'); body.classList.remove('overflow'); if ( modal_block.classList.contains('modal_zakaz_up')) { modal_block.classList.toggle('modal_zakaz_up'); modal_block.classList.toggle('modal_zakaz_down'); fadeOut(modal_block,500,40); } setTimeout( function () { if (modal_block.classList.contains('modal_zakaz_down')) { modal_block.classList.toggle('modal_zakaz_down'); } },1000 ) fadeOut(overlay,700,40); function closeOverlay(event) { overlay.style.display = "block"; } setTimeout(closeOverlay() ,500); } } Но это работает так же, только теперь в ссылке где указано #min_modal, вызывается #big modal |
l_mke,
var modal_block сделайте let вместо var |
Сделал, все равно не помогло, только теперь он открывает то что нужно, но только по одной ссылке, а при закрытии исчезает только #overlay
|
l_mke,
сделайте минимальный, но полноценный макет Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
модальное окно, делегирование
l_mke,
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .parent_popup { background-color: rgba(0, 0, 0, 0.8); display: none; position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } .parent_popup.show{ display: block; } .popup { background: #fff; width: 120px; margin: 10% auto; padding: 5px 20px 13px 20px; border: 10px solid #ddd; position: relative; box-shadow: 0px 0px 20px #000; border-radius: 15px; } .close { background-color: rgba(0, 0, 0, 0.8); border: 2px solid #ccc; height: 24px; line-height: 24px; position: absolute; right: -24px; cursor: pointer; font-weight: bold; text-align: center; text-decoration: none; color: rgba(255, 255, 255, 0.9); font-size: 14px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); top: -24px; width: 24px; border-radius: 15px; box-shadow: 1px 1px 3px #000; } .close:hover { background-color: rgba(0, 122, 200, 0.8); } .content_info { display: none; } .popup .content_info { display: block; } </style> <script> document.addEventListener("click", event => { let {target} = event; const overlay = document.querySelector(".parent_popup"), close = document.querySelector(".close"), popup = document.querySelector(".popup"); if (target === overlay || target === close) { event.preventDefault(); overlay.classList.remove("show"); }; if (target = target.closest(".open_modal")) { event.preventDefault(); const id = target.getAttribute("href"), el = document.querySelector(id), content = popup.querySelector(".content_info"); if(content) document.body.append(content); if(el) { document.querySelector(".popup").prepend(el); overlay.classList.add("show") }}; }) </script> </head> <body> <div class="parent_popup" > <div class="popup"> <a class="close"title="Закрыть" >X</a> </div> </div> <a href="#big_modal" class="open_modal">big_modal</a> <a href="#min_modal" class="open_modal">min_modal</a> <div id="big_modal" class="content_info">big_modal info</div> <div id="min_modal" class="content_info">min_modal info</div> </body> </html> |
Спасибо, большое. Прошу прощения целый день в суматохе, только сейчас смог зайти посмотреть.
|
Часовой пояс GMT +3, время: 07:36. |