Открытие любого количества модальных окон по ссылке
Всем доброго дня!
Нужна помощь. Если кто может, то пожалуйста.
Есть скрипт модального окна. Он открывает одно окно по классу. Как его переделать, чтобы он открывал любое кол-во окон по ссылке <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>
Источник: Stack Overflow на русском