Модальные окна на jQuery

Код:

<a class="modal" href="#modalid">Открыть окно</a>
<div id="modalid" class="modal_win">
	<span class="modal_close">X</span>
	Содержимое
</div>
<div class="modal_mask"></div>

modal_mask лучше всего расположить перед закрытием body
modal_win НЕ должен размещаться а блоке у которого есть position: relative;

Скрипт:

jQuery(document).ready(function() {

	jQuery('a.modal').click(function(e) {
		e.preventDefault();
		var id = jQuery(this).attr('href');
		var maskHeight = jQuery(document).height();
		var maskWidth = jQuery(document).width();
		jQuery('.modal_mask').css({'width':maskWidth,'height':maskHeight});
		jQuery('.modal_mask').fadeIn(0);	
		jQuery('.modal_mask').fadeTo(0,0.4);

		var winH = jQuery(window).height();
		var winHt = jQuery(document).scrollTop();
		var winW = jQuery(document).width();
		var modh = jQuery(id).innerHeight();
		var modw = jQuery(id).innerWidth();
              	if (modh > winH) {
			jQuery(id).css('top', winHt);
		} else {
			jQuery(id).css('top', winHt + winH/2-modh/2);
		}
		jQuery(id).css('left', winW/2-modw/2);

		jQuery(id).fadeIn(200);
	});

	jQuery('.modal_close').click(function (e) {
		e.preventDefault();
		jQuery('.modal_mask, .modal_win').hide();
	});		

	jQuery('.modal_mask').click(function () {
		jQuery(this).hide();
		jQuery('.modal_win').hide();
	});

});

Стили:

.modal_win{
	display: none;
	width: 500px;
	height: 300px;
	padding: 10px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9999;
	background: #fff;
	overflow-y: auto;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px; 
	-khtml-border-radius: 10px; 
	border-radius: 10px;
	}

.modal_close{
	color: #ff0000;
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
}

.modal_mask {
	position:absolute;
	left:0;
	top:0;
	z-index:9000;
	background: #000;
	display:none;
}

Сделать так чтоб окно всплывало когда открыть страницу по адресу типа site.com/#modalid

jQuery(document).ready(function() {

	function removeHash () { 
		history.pushState("", document.title, window.location.pathname + window.location.search);
	}
	var modalid = document.location.hash;
	if (modalid.length > 0 & jQuery(modalid).hasClass("modal_win")) {
		var maskHeight = jQuery(document).height();
		var maskWidth = jQuery(window).width();
		jQuery('.modal_mask').css({'width':maskWidth,'height':maskHeight});
		jQuery('.modal_mask').fadeIn(0);	
		jQuery('.modal_mask').fadeTo(0,0.4);

		var winH = jQuery(window).height();
		var winHt = jQuery(document).scrollTop();
		var winW = jQuery(window).width();
		var modh = jQuery(modalid).innerHeight();
		var modw = jQuery(modalid).innerWidth();
              	if (modh > winH) {
			jQuery(modalid).css('top', winHt);
		} else {
			jQuery(modalid).css('top', winHt + winH/2-modh/2);
		}
		jQuery(modalid).css('left', winW/2-modw/2);

		jQuery(modalid).fadeIn(200);
	}

	jQuery('a.modal').click(function(e) {
		e.preventDefault();
		var id = jQuery(this).attr('href');
		document.location.hash = id;
		var maskHeight = jQuery(document).height();
		var maskWidth = jQuery(window).width();
		jQuery('.modal_mask').css({'width':maskWidth,'height':maskHeight});
		jQuery('.modal_mask').fadeIn(0);	
		jQuery('.modal_mask').fadeTo(0,0.4);

		var winH = jQuery(window).height();
		var winHt = jQuery(document).scrollTop();
		var winW = jQuery(window).width();
		var modh = jQuery(id).height();
		var modw = jQuery(id).width();
              	if (modh > winH) {
			jQuery(id).css('top', winHt);
		} else {
			jQuery(id).css('top', winHt + winH/2-modh/2);
		}
		jQuery(id).css('left', winW/2-modw/2);

		jQuery(id).fadeIn(200);
	});

	jQuery('.modal_close').click(function (e) {
		e.preventDefault();
		jQuery('.modal_mask, .modal_win').hide();
		removeHash();
	});		

	jQuery('.modal_mask').click(function () {
		jQuery(this).hide();
		jQuery('.modal_win').hide();
		removeHash();
	});

});
Запись опубликована в рубрике JavaScript с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *