JavaScript

Поправить модальное окно на javascript

Здравствуйте!
Дано такое модальное окно: http://jsbin.com/nolohehige/1/edit?html,css,js,output
"Ссылка 1" - работает.

Задача 1: сделать открытие "Ссылка 1" с двух кнопок.
Задача 2: сделать второе модальное окно на странице – "Ссылка 2" (открытие также с 2 кнопок).

Насколько понимаю, нужно выбирать не по id, а по классу. А в кнопке передавать параметр, по которому определять, которое окно должно открываться. Но как это сделать - не хватает знаний.
Друзья, подскажите пожалуйста.
Владимир Пантюхин
Владимир Пантюхин
700
Брррр... слишком уж усложняете такую простую задачу.
Достаточно data-атрибут кнопке присвоить (с айди блока), и с ним работать: http://jsbin.com/reyexenavu/edit?js,output
Дмитрий .
Дмитрий .
95 571
Лучший ответ
Владимир Пантюхин Таки да, это называется писать код методом тыка... Ярослав, спасибо Вам! То что надо.
Четно говоря чёрт ногу сломит что ты написал пришлось слегка подправить HTML CSS нетрогал остался неизменный скрипт переписать пришлось заново А вообще если ты хочешь чтоб кнопки выполняли одни и те же действия давай им просто одинаковые id так их проще обрабатывать их будет

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.modal-window-js {
width: 800px;
max-width: 100%;
height: 600px;
max-height: 100%;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;}
.modal-window-js,.modal-overlay,.closed {display: none;}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
background: rgba(0, 0, 0, 0.6);}
.opened {display: block}
</style>
</head>
<body>
<!--1 окно-->
<div id='win1' style="display: none">
<div class="modal-overlay opened closed" id="modal-overlay"></div>
<div class="modal-window-js opened" id="modal-window-js">
Текст – 1 модальное окно
<button class="close-button" id="close-button">Закрыть</button>
</div>
</div>
<!--Показать 1 окно-->
<button id="show-modal-botton" class="show-modal-bottom">Ссылка 1</button>
<button id="show-modal-botton-copy" class="show-modal-bottom2">Ссылка 1 вторая ссылка</button>

<br><br>

<!--2 окно-->
<div id='win2' style="display: none">
<div class="modal-overlay opened closed" id="modal-overlay2"></div>
<div class="modal-window-js opened" id="modal-window-js2">
Текст – 2 модальное окно
<button class="close-button" id="close-button">Закрыть</button>
</div>
</div>
<!--Показать 2 окно-->
<button id="show-modal-botton2" class="show-modal-bottom">Ссылка 2</button>
<button id="show-modal-botton2-copy" class="show-modal-bottom2">Ссылка 2 вторая ссылка</button>
<script>
onclick=function(){
cunt=arguments[0].target.id;
if(/^(show-modal-botton|show-modal-botton-copy)$/.test(cunt)) {//1 и 1_ кнопка
win1.style.display='block';
}

if(/^(show-modal-botton2|show-modal-botton2-copy)$/.test(cunt)) {//2 и 2_ кнопка
win2.style.display='block';
}

if(/^close-button$/.test(cunt)) {//Закрытие
if(win1.style.display==='block')win1.style.display='none';
if(win2.style.display==='block')win2.style.display='none';
}
}
</script>
</body>
</html>

⚤
Сергей Петрович Маньков
Сергей Петрович Маньков
90 526
Владимир Пантюхин Одинаковые id я из-за проблем с валидацией не хотел использовать. Ваш код отлично подходит! Спасибо большое!

Похожие вопросы