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

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

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

HTML & CSS

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

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

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

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();
	}

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

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