Открытие произвольного количества модальных окон с уникальным id для каждого.

@LADYX · Регистрация: 19.02.2015

Author24 — интернет-сервис помощи студентам

Всем доброго дня!
Нужна помощь. Если кто может, то пожалуйста.
Есть скрипт модального окна. Он открывает одно окно по классу. Как его переделать, чтобы он открывал любое кол-во окон по ссылке <a href id..., присвоив персональный id каждому окну? А также использовать одну подложку для всех окон. Если кто может, помогите пожалуйста.

Javascript

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();
          });

HTML5

<p class="modal-link">Открыть окно</p>
<div class="modal-overlay">
  <div class="modal-window">
    <p>содержимое</p>
    <button class="close">Close</button>
  </div>
</div>

@Serg@NT · 20.02.2015, 11:48

Модальное окно оттого и названо модальным, что открывается только одно и не позволяет ничего делать, пока его не закроешь.

@Serg@NT 9 / 5 / 1 Регистрация: 09.11.2012 Сообщений: 31
	20.02.2015, 11:48	2
	Модальное окно оттого и названо модальным, что открывается только одно и не позволяет ничего делать, пока его не закроешь. 1