Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.06.2019, 22:10
Интересующийся
Отправить личное сообщение для l_mke Посмотреть профиль Найти все сообщения от l_mke
 
Регистрация: 30.06.2019
Сообщений: 18

Модальное окно
Доброго времени суток, знаю, что эту тему уже заюзали, но все же попрошу помощи))

У меня на сайте есть несколько модальных окон, которые вызываются по 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 которую видит на странице, а другие игнорирует, подскажите как дописать скрипт , что бы он работал со всеми модальными окнами на странице.
Ответить с цитированием
  #2 (permalink)  
Старый 30.06.2019, 22:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

l_mke,
циклом по всем ссылкам с '.open_modal' вместо строки 2.
for(const open_modal of document.querySelectorAll(".open_modal")) {
...
let div = open_modal.getAttribute('href');
...
open_modal.onclick...
....
}
Ответить с цитированием
  #3 (permalink)  
Старый 30.06.2019, 22:59
Интересующийся
Отправить личное сообщение для l_mke Посмотреть профиль Найти все сообщения от l_mke
 
Регистрация: 30.06.2019
Сообщений: 18

Если я правильно понял, то надо было сделать так :

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
Ответить с цитированием
  #4 (permalink)  
Старый 30.06.2019, 23:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

l_mke,
var modal_block сделайте let вместо var
Ответить с цитированием
  #5 (permalink)  
Старый 30.06.2019, 23:11
Интересующийся
Отправить личное сообщение для l_mke Посмотреть профиль Найти все сообщения от l_mke
 
Регистрация: 30.06.2019
Сообщений: 18

Сделал, все равно не помогло, только теперь он открывает то что нужно, но только по одной ссылке, а при закрытии исчезает только #overlay
Ответить с цитированием
  #6 (permalink)  
Старый 30.06.2019, 23:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

l_mke,
сделайте минимальный, но полноценный макет
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #7 (permalink)  
Старый 01.07.2019, 00:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

модальное окно, делегирование
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>
Ответить с цитированием
  #8 (permalink)  
Старый 01.07.2019, 22:05
Интересующийся
Отправить личное сообщение для l_mke Посмотреть профиль Найти все сообщения от l_mke
 
Регистрация: 30.06.2019
Сообщений: 18

Спасибо, большое. Прошу прощения целый день в суматохе, только сейчас смог зайти посмотреть.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальное окно, запретить скролл всему документу на чистом JS TommyWork Общие вопросы Javascript 8 13.04.2017 10:39
Вывод информации в модальное окно frack Общие вопросы Javascript 2 04.08.2016 11:46
Модальное окно. Salvat Элементы интерфейса 4 25.02.2016 09:33
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 13:27
Как передать переменную в модальное окно sinsir jQuery 24 20.06.2013 16:59