Модальное окно на jquery

Модальное окно - это дополнительное окно сайта, которое накладывается поверх основной странице. Есть множество плагинов для реализации. Но давайте же рассмотрим, как написать свой скрипт, для этой задачи.

CSS

	#back{
		position:absolute;
		left:0;
		top:0;
		z-index:9000;
		background-color:#000;
		display:none;
		}
	#boxes a{
		color: #000;
		text-decoration: none;
	}
	#boxes .window{
		position:absolute;
		left:0;
		top:0;
		display:none;
		z-index:99999;
		padding:20px;
		text-align: center;
		font-size: 25px;
		border-radius: 6px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
		}
	#boxes #dialog{
		width:400px;
		height:300px;
		padding:10px;
		background-color:#ffffff;
		}
	.close{
		position: absolute;
		right: 15px;
		bottom: 10px;
		}

Стили:

• #back - задний фон при активной модальном окне.
• .window - Общие стили для модальных окон.
• #dialog - Стили для конкретного окна.

Подключение библиотеки Jquery

Jquery

$(document).ready(function() {
		$('a[name=modal]').click(function(e) {
			e.preventDefault();
			var id = $(this).attr('href');
			var backHeight = $(document).height();
			var backWidth = $(window).width();
			$('#back').css({'width':backWidth,'height':backHeight});
			$('#back').fadeIn(300);
			$('#back').fadeTo(300,0.8);
			var winH = $(window).height();
			var winW = $(window).width();
			$(id).css('top',  winH/2-$(id).height()/2);
			$(id).css('left', winW/2-$(id).width()/2);
			$(id).fadeIn(300);
		});
		$('.window .close').click(function (e) {
			e.preventDefault();
			$('#back, .window').hide();
		});
		$('#back').click(function () {
			$(this).hide();
			$('.window').hide();
		});
	});

Параметры:

• $('#back').fadeIn(300); - скорость перехода на тёмный фон.
• $('#back').fadeTo(300,0.3); - прозрачность фона.
• $(id).fadeIn(3000); - скорость появления модального окна.

HTML

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

				

				
Модальное окно
				
Текст модального окна.
				Закрыть
				
				

			

Демонстрация