Помогите пожалуйста!
Всем доброго дня!
Нужна помощь. Если кто может, то пожалуйста. Есть скрипт модального окна. Он открывает одно окно по классу. Как его переделать, чтобы он открывал любое кол-во окон по ссылке <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> |
Часовой пояс GMT +3, время: 05:38. |