Заметки - Блог о web-разработке. Сервисы для блоггеров. Блоговое Голосов: 1 Адрес блога: http://www.blogovoe.ru/blog/ Добавлен: 2013-12-27 23:28:54 блограйдером panevin

Простейшее модальное окно jQuery+CSS

2016-11-05 15:43:29 (читать в оригинале)

Типовая задача - сделать всплывающее модальное окно. Погнали!

Яваскрипт (файл jquery.modalwindow.js, 2 Кб в несжатом виде):

jQuery.fn.modalwindow = function(options){

  var options = jQuery.extend({
    //height: '270', // высота всплывающего окна
    //width: '690', // ширина всплывающего окна
    title: '' //заголовок всплывающего окна
  },options);

	this.makeCenter = function() {
            if (jQuery(this).height() <100) var a = ( (($(window).height() / 2) - ( 500 ) )) + ($(document).scrollTop());
			//else var a = ( (($(window).height() / 2) - ( (jQuery(this).height()) / 2 ) )) + ($(document).scrollTop());
			else var a = ($(document).scrollTop()) + 200;
            if (a<0)
                a = 0;
				//alert(($(window).height() / 2));
            jQuery(this).css ({
                top: a + 'px',
                //top: '165px',
                left: ( (($(window).width() / 2) - ( (jQuery(this).width()) / 2 ) )) + ($(document).scrollLeft()) + 'px'
            });
	};
        this.setTop = function (){
            jQuery(this).css ({
                top: ( (($(window).height() / 2) - ( (jQuery(this).height()) / 2 ) )) + ($(document).scrollTop()) + 'px'
            });
        };
        this.setParamsToOverflow = function(id) {
                $('#'+id+'_overflow').css({
                    height:$(document).height()+'px',
                    width:$(document).width()+'px'
                });
	};
	this.maintainPosition = function() {
		$(window).scroll( function() {
			this.makeCenter();
		} );

	}

	//________
	this.init = function() {
	var _id = jQuery(this).attr('id');
	//alert(_id);
            $(window).keypress(function(event) {
              if (event.keyCode == '27') {
                $('.'+_id+'_overflow').fadeOut("fast");
                $("."+_id).fadeOut("fast");
                //$("#"+_id).html('');
               }
            });

            //Изменение размеров главного окна
            $(window).resize(function() {
                _this.setParamsToOverflow(_id);
                _this.makeCenter();
            });

            /*$(window).scroll(function() {
                _this.setTop();
            });*/
            this.makeCenter();
	};
      return this.init();
};

вызов окна и остальное (в общем файле яваскриптов, например):

if (window.jQuery) {
$(document).ready(
  function()
  {
var wh = $(window).height();
var dh = $(document).height();
// подгон высоты подложки
if ($("#podlogka").length) {
	if ($("#podlogka").height() < dh) $("#podlogka").height(dh);
}


if ($("#podlogka").length) {if ($("#podlogka").height() < dh) $("#podlogka").height(dh + 25);}
$(".cities_list_lnk").live("click", function(){
	$(".emptyModalWindow").fadeIn("fast");
	$('.new_window_empty').modalwindow();
	

	// у меня внутреннее содержимое модального окна заполняется из переменной html, следующую строку можно прибить, тогда содержимое окна будет таким, как пропишете в html
		$('.emptyModalWindow .c').html(html);
		$('.emptyModalWindow').fadeIn("slow");
		$('.new_window_empty').modalwindow();
	
	return false;
});

//закрытие окна
$(".close_window, #podlogka").click(function(){
	if ($(this).parent().parent().is(".hidden")) $(this).parent().parent().fadeOut("fast");
	return false;
});

});
}

скрипт модернизируем под ваши задачи.

Стили:
#podlogka{position: absolute;z-index: 8888;background-color:#000000;top:0px;left:0px;display: block;ms-filter: 'Alpha(Opacity=50)';opacity: 0.5;-moz-opacity: 0.5;filter:
alpha(opacity=50);-khtml-opacity: 0.5;/*height:11000px;*/overflow:hidden;/*height:100%;*/min-height:100%;width:100%;}
.new_window{position: absolute;z-index: 9000;display: block;background-color: #FFF;border-bottom: 1px solid #a3a3a4;/*margin-top:30%;margin-left:30%;*/background: #fff url(/img/new_window_bg.png) 0px 0px repeat-x;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.53);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.53);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.53);
behavior: url(/js/PIE.htc);
}
.new_window .c{padding:26px;padding-top: 45px;}
.new_window .close_window{position: absolute;background: url(/img/sprite.png) -102px 0px no-repeat;width:17px;height:17px;right: 16px;top:10px;}
.new_window .rc{float:right;width:272px;margin-left:33px;}
.new_window .lc{float:left;width:305px;border-right:1px solid #efefef;}
.new_window .inner ul {padding:0px; margin:0px;}
.new_window .inner ul li {padding:0px; margin:0px; list-style-type:none; width:33%; position:relative; float:left; min-width:100px; line-height:26px;}
.new_window .inner ul li a {color:#666; font-size:16px;}

html:
<div class="hidden emptyModalWindow new_window3_overflow">
<div id="podlogka" class="podlogka"></div>
<div id="new_window3" class="new_window_empty new_window">
<a href="#" class="close_window"></a>
<div class="c"></div>
</div>
</div>

И не забудьте пару картинок: подложка, крестик и спрайт.
Всё!