Лайтбокс эффект на jQuery

Библиотека jQuery обладает массой возможностей в области оформления и управления элементами. Давайте на простом примере разберем, как реализовать плавно появляющийся блок в Lightbox (лайтбокс эффект) с помощью jQuery.

Как это работает?

Для начала необходимо сформировать HTML-содержимое страницы:

<div class="overlay"></div>
<div class="lightbox">
	<h3>Lightbox эффект</h3>
	<a href="#" class="close"><img src="/close.png" alt="Закрыть" /></a>
	<p>Lightbox открыт. Здесь Вы можете увидеть содержимое Вашего блока.</p>
</div>
<a href="#" class="open">Открыть Lightbox</a>

Из кода мы видим, что у нас есть ссылка <a href=»#» class=»open»></a>, нажав на которую появляется блок с нашим содержимым <div class=»lightbox»></div>. При появлении этого блока, область сайта затемняется при помощи заданного в самом начале блока <div class=»overlay»></div>. В нашем блоке также имеется ссылка <a href=»#» class=»close»></a>, при нажатии на эту ссылку или же в любом пустом месте вне нашего блока, окно Lightbox закроется.

Перейдем к оформлению окна Lightbox. В коде ниже отмечены свойства display: none; для блоков с классами .overlay и .lightbox, это необходимо для того, чтобы на начальном этапе при открытии страницы блок с нашим содержимым, а также блок затенения были скрыты. Блоку с классом .overlay зададим фиксированную позицию от левого верхнего угла, чтобы этот блок был полупрозрачным, добавим свойство opacity: 0.8

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: #000;
	opacity: 0.8;
}
   
.lightbox {
	display: none;
	width: 500px;
	padding: 25px;
	background: #ffffff;
	box-shadow: 0 0 25px #111111;
	-moz-box-shadow: 0 0 25px #111111;
	-webkit-box-shadow: 0 0 25px #111111;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	z-index: 99;
} 
   
a.close {
	position: absolute;
	top: 15px;
	right: 15px;
}

И последнее, что нам необходимо для полноценного функционирования окна Lightbox — это добавить скрипт обработки событий

jQuery(document).ready(function () {
	//Установить lightbox позицию в центре экрана
	jQuery('.lightbox').css({
		position: 'fixed',
		top:'50%',
		left:'50%',
		margin:'-'+(jQuery('.lightbox').height() / 2)+'px 0 0 -'+(jQuery('.lightbox').width() / 2)+'px'
	});

	// Показать lightbox маску, если нажатия на ссылку
	jQuery('a.open').click(function(e) {
		e.preventDefault();
		jQuery('.lightbox').fadeIn(800);
		jQuery('.overlay').fadeIn(800);
	});

	// Скрыть  lightbox и  маску, если мышка нажата вне блока
	jQuery('a.close, .overlay').click(function(e) {
		e.preventDefault();
		jQuery('.lightbox').fadeOut(800);
		jQuery('.overlay').fadeOut(800);
	});
});

Разберем подробнее, что мы делаем:

jQuery(‘.lightbox’).css({ — добавляем CSS-свойства в lightbox элемент, устанавливаем фиксированную позицию по центру, даже во время прокрутки, а также устанавливаем отступ margin в соответствии с шириной и высотой lightbox элемента. Всё это позволит нам зафиксировать блок с нашим содержимым в центре даже во время прокрутки.

jQuery(‘a.open’).click(function(e) { — с помощью этой функции мы отображаем lightbox элемент и маску с угасания. Устанавливаем скорость затемнения и угасания 800, Вы можете сделать это быстрее или медленнее за счет уменьшения или увеличения значения соответственно.

jQuery(‘a.close, .overlay’).click(function(e) { — данной функцией мы просто скрываем lightbox элемент и наложения элементов при помощи FadeOut, в случае, если мышка была нажата или на ссылку закрытия окна Lightbox.

Таким простым способом мы создали лайтбокс эффект на jQuery.

Вы можете скачать пример работы данного скрипта из вложения в конце статьи.