Скрипт модального окна

[LADYX 91]

Всем доброго дня!

Нужна помощь. Если кто может, то пожалуйста.

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

[odys 385]

LADYX, так себе скрипт... Используй лучше модальные окна от jqueryui, тем более они уже подключены в dle по умолчанию (http://jqueryui.com/dialog/)

[LADYX 91]

odys, jqueryui я знаю конечно, но это не то что нужно. А этот скрипт мне как раз подходит в идеале под то, что сейчас делаю.

[odys 385]

LADYX, я конечно не очень понимаю может кто отпишется, кто больше соображает, у себя в проекте, из-за не знаний, сделал так:

$("[role=open_form]").click(function() {

    $(".overlayer").show();

    $(".loginform").animate({

	  "height": "show", "opacity": "show"

    }, { duration: "slow" });

    $("body").addClass("overlayered");

    return false;

});


$("[role=close_form]").click(function() {

    $(".overlayer").hide();

    $(".loginform").hide();

    $("body").removeClass("overlayered");

});

Это по сути тоже самое модальное окно, с оверлеем и анимацией открытия.

И собственно сидеть и париться не видел смысла

а всё, что делает твой скрипт с размером, можно и самому через .css задать

[LADYX 91]

odys, в том скрипте функция скролла по вертикали меня устраивает, да и для каждого окна можно свой стиль задать.

Но в любом случае спасибо за советы)

[odys 385]

LADYX, я так понимаю, что там скролл убирается?

Если да, то и у меня он убирается, правда через css, для этого и скрипт добавляет для body класс overlayered, а при нажатии кнопки закрыть, убирает этот класс

[LADYX 91]

я так понимаю, что там скролл убирается?

да, а на его месте появляется скролл в случае, если окно по высоте объемное. И центрирование у него удачно выполнено, и без лишнего css с паддингами да маргинами отрицательными, да процентами. И никаких "блямканий" нет, например, при скролле, как это часто бывает у большинства подобных скриптов. Вообще, скрипт очень интересный, я многие уже перебрал, и в основном где-то что не устраивает, а этот вот меня заинтересовал. По крайней мере, минусов в нем не заметил. Может быть я чего-то не понимаю, но как-то так