Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Помогите пожалуйста! (https://javascript.ru/forum/project/53816-pomogite-pozhalujjsta.html)

LADYX 19.02.2015 20:04

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



Часовой пояс GMT +3, время: 05:38.