Создание lightbox как в Facebook

5-09-2010

В этом уроке попробуем создать всплывающее окно(lightbox) как в Facebook, в котором можно будет размещать не только картинки но и любой другой контент, кто не видел фесбуковкий лайтбокс снизу показано:


Будем конечно же использовать javascript как и в любых других lightboxах, но начнем мы с HTML и CSS.

HTML CSS

Для начала создадим div который покроет все окно, нужно для того чтобы задняя часть лайтбокса была неактивной, также мы сможем сделать ее темнее, ну это уже по желанию. Создаем:

<div id="gogo_overly"></div>

Указываем для этого diva следующие стили

height:100%;
width:100%;
opacity:0.5;
position:fixed;
top:0;
z-index:100;

Тоесть указываем диву 100% ширину и высоту, фиксированное позиционирование чтоб при скроллинге он не съезжал, и указываем 100ый z-index можно было поставить и поменьше но для надежности 100 :) z-index помогает делать все остальные элементы у которых z-index меньше 100 неактивными точнее они будут активными но будут расположены нашим дивом и не будут кликабельными, а активными будут только те элементы у которых z-index больше 100 , а это будут элементы нашего лайтбокса.
Дальше собственно приступаем к созданию самого лайтбокса HTML будет примерно следующим- это четыре вложенных дива первые два для позиционирования по центру так удобней :) третий для эффекта прозрачных границ мы же хотим как в Facebook так как сами границы прозрачными не получиться седлать создаем этот третий див который будет больше последнего четвертого дива, и будет иметь прозрачный фон в итоге получиться такой эффект, ну и последний четвертый див в котором будет располагаться весь нужный контент. Естественно все дивы имеют разные ид:

<div id="gogo_wrap">
<div id="gogo_box" class="gogobox" style="top:125px; width:522px;">
		<div id="gogo_contant">
			<div id="gogo_last_cont">
				<h2 id="gogo_head">Загаовок лайтбокса</h2>
				<div id="gogo_must_change">
				Здесь будет контент
</div>
<div id="gogo_close_panel">
<button name="close-gogo_box" id="close-gogo_box" onclick="close_gogo_box();">Закрыть</button>
</div>
			</div>
		</div>
	</div>
</div>

Стили для дива с ид gogo_box вытащили наружу для того чтобы в дальнейшем нам было удобней управлять шириной и расположением лайтбокса через javascript, ну это все потом, а сейчас приступим к CSS. Ну для первых двух дивов которые мы как я говорил создали для позиционирования указываем следующие стили:

#gogo_wrap{
	height:0;
	left:0;
	overflow:visible;
	position:absolute;
	top:0;
	width:100%;
	z-index:101;
}
#gogo_box{
	height:0;
	margin:auto;
	overflow:visible;
	position:relative;
}

Далее стилизуем следующий див, а это див с id gogo_contant он должен иметь скругленные углы и прозрачный серый фон:

#gogo_contant{
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	-border-radius:8px;
	background:none repeat scroll 0 0 rgba(163, 163, 163, 0.7);
	padding:10px;
}

Как видно мы указали 8 пиксельное скругление углов, и сделали прозрачный фон, а padding нужен для того чтобы в дальнейшем он был больше следующего дива и получился эффект прозрачных границ в нашем случае границы будут шириной 10px. Далее преходим к стилизации остальных элементов нашего lightboxа. Самое главное нужно указать для следующего дива непрозрачный, белый фон:

#gogo_last_cont{
	background:#fff;
}
h2#gogo_head{
	background:#829ACE;
	font-size:16px;
	font-weight:normal;
	padding:4px 6px;
	color:#fff;
	border-bottom:1px solid #333;
}
#gogo_close_panel{
	text-align:right;
	height:30px;
	border-top:1px solid #ccc;
	margin-top:4px;
}
button#close-gogo_box{
	border:1px solid #333;
	padding:3px;
	margin:3px 5px 3px 3px;
	background:#4B6EB9;
}
button#close-gogo_box:hover{
	color:#E6E6E6;
	cursor:pointer;
}

Вот и все со стилизацией мы закончили, в итоге у нас получилось то что показано снизу на картинке.

Javascript

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

<button id="show_gogo_box">Открыть gogo_box</button>

Теперь давайте сделаем функцию которая будет создавать на нашей странице наш lightbox для этого будем использовать Jquery подключаем его, допустим с гугловсого архива:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript" language="javascript"></script>

Вот подключили, начинаем писать функцию сделаем ее чуточку гибкой так сказать, добавим возможность передавать функции заголовок и будущий контент содержащийся в лайтбоксе. Выглядит наша функция вот так:

function create_gogo_box(title,contant){		
		$("body").append('<div id="gogo_wrap">\
			<div id="gogo_box" class="gogobox" style="top:125px; width:522px;">\
				<div id="gogo_contant">\
					<div id="gogo_last_cont">\
						<h2 id="gogo_head">'+title+'</h2>\
						<div id="gogo_must_change">\
						'+contant+'\
						</div>\
						<div id="gogo_close_panel">\
							<button name="close-gogo_box" id="close-gogo_box" onclick="close_gogo_box();">Закрыть</button>\
						</div>\
					</div>\
				</div>\
			</div>\
		</div>\
		<div id="gogo_overly"></div>');		
	}

Далее делаем так чтоб при клике на кнопку которую мы создали до этого, а она была с ид show_gogo_box, вызывалась наша функция:

$('#show_gogo_box').click(function(){
	
	create_gogo_box('Здесь заголовок','Здесь контэнт')}
	
	);

Вот и все теперь осталось написать функцию для удаления лайтбокса со страницы, называться она должна close_gogo_box так как мы уже прописали ее для нашей кнопки, пишем:

function close_gogo_box(){
	$('#gogo_wrap').remove();
	$('#gogo_overly').remove();
	}

Ну а вот так он будет выглядеть с картинкой:


Вот теперь точно все.

clueless5.17.2011 01:05
This looks so awesome. I only wish I could understand Russian.
Дмитрий8.5.2012 01:08
Спасибо большое))) а не подскажите, как вставить комментарии фейсбук или вконтакте в отдельно всплывающую фотографию в статье вордпресс?
ОСТАВИТЬ КОММЕНТАРИЙ