Доброго времени суток, знаю, что эту тему уже заюзали, но все же попрошу помощи))
У меня на сайте есть несколько модальных окон, которые вызываются по 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 которую видит на странице, а другие игнорирует, подскажите как дописать скрипт , что бы он работал со всеми модальными окнами на странице.