Всем доброго дня!
Нужна помощь. Если кто может, то пожалуйста.
Есть скрипт модального окна. Он открывает одно окно по классу. Как его переделать, чтобы он открывал любое кол-во окон по ссылке <a href id..., присвоив персональный id каждому окну? А также использовать одну подложку для всех окон. Если кто может, помогите пожалуйста.
function Modal(modalEl, overlayEl) {
this.modal = $(modalEl);
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;
$('.modal-link').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.init();
});
|
Код:
|
<p class="modal-link">Открыть окно</p>
<div class="modal-overlay">
<div class="modal-window">
<p>содержимое</p>
<button class="close">Close</button>
</div>
</div> |
