Показать сообщение отдельно
  #1 (permalink)  
Старый 19.02.2015, 20:04
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 219

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