Создание 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();
}
Ну а вот так он будет выглядеть с картинкой:
Вот теперь точно все.
До скорых втреч, дорогие посетители моего сайта!
С Вами был ваш Юрич!