Всем здравствуйте!
Вопрос следующего характера. Есть скрипт модального окна, который открывает любое количество окон на странице. Но в этом случае тогда в скрипте нужно прописывать каждое окно. А как сделать, чтобы в скрипте указать просто открытие окна по id. Чтобы в html было только <a id="1">
. Открыть окно </a> и <div id="1">
и не нужно было каждое окно прописывать в скрипте. А также в html указать одну подложку див, чтобы ее не указывать для каждого окна.
Вот скрипт. Помогите, пожалуйста, сам разобраться не могу.
<div class="container">
<p id="modal-link">Click to open a modal window and an overlay.</p>
</div>
<div class="container1">
<p href="#" id="click_me">Click_me</p>
</div>
<div class="modal-overlay">
<div class="modal-window">
<h1>Welcome to the modal window!</h1>
<p>This is a pop up that may contain a form or other info</p>
<button class="close-button">Close popup</button>
</div>
</div>
<div class="modal-overlay1">
<div class="modal-window1">
<h1>Номер2</h1>
<p>Есть же</p>
<button class="close-button">Close popup</button>
</div>
</div>
#modal-link {
font-size: 2em;
color: #FFFFEE;
cursor: pointer;
}
.modal-overlay {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,.5);
width: 100%;
display: none;
z-index: 1000;
overflow: scroll;
}
.modal-window {
position: absolute;
max-width: 500px;
width: 50%;
padding: 20px;
background: #FFF;
top: 0;
display: none;
z-index: 2000;
}
.modal-overlay1 {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,.5);
width: 100%;
display: none;
z-index: 1000;
overflow: scroll;
}
.modal-window1 {
position: absolute;
max-width: 500px;
width: 90%;
padding: 20px;
background: #FFF;
top: 0;
display: none;
z-index: 2000;
}
#click_me{
cursor:pointer;
}
function Modal(modalEl, overlayEl, modalOpener) {
this.modal = $(modalEl);
this.modalOpener = $(modalOpener);
this.overlay = $(overlayEl);
this.wWidth = $(window).width();
this.wHeight = $(window).height();
this.dHeight = $(document).height();
}
Modal.prototype = {
init: function(){
this.bindHandlers();
},
bindHandlers: function(){
var self = this;
$(self.modalOpener).on('click', function(){
self.showModal();
});
$(window)
.resize(function() {
self.setWinSize($(this));
self.setModalPosition();
})
.scroll(function() {
self.setWinSize($(this));
self.setModalPosition();
});
$('.close-button').click(function(){
self.hideModal();
});
},
showModal: function(){
this.overlay.fadeIn();
this.modal.fadeIn();
this.setModalPosition();
},
hideModal: function(){
this.overlay.fadeOut();
this.modal.fadeOut();
},
setModalPosition: function(){
var modalHeight = this.modal.outerHeight(),
modalWidth = this.modal.outerWidth(),
scrollTop = $(window).scrollTop();
if(this.wHeight < modalHeight){
this.modal.css('top', scrollTop);
} else {
this.modal.css('top', this.centerVertically(this.wHeight,modalHeight,scrollTop));
}
if(this.wWidth < modalWidth){
this.modal.css('left', 0);
} else {
this.modal.css('left', this.centerHorizontally(this.wWidth,modalWidth));
}
},
centerVertically: function(w, m, scroll){
return ((w - m)/2 + scroll);
},
centerHorizontally: function(w, m){
return (w - m)/2;
},
setWinSize:function(win){
this.wWidth = win.width();
this.wHeight = win.height();
}
}
$(document).ready(function(){
var modal = new Modal('.modal-window', '.modal-overlay','#modal-link'),
modal1 = new Modal('.modal-window1', '.modal-overlay1','#click_me');
modal.init();
modal1.init();
});