Создание lightbox как в Facebook
И снова — здравствуйте!
Рад Вас видеть на моем блоге, посвященному в основном вордпресс, верстке и программированию.
Сегодня мы попробуем создать всплывающее окно(lightbox) как в Facebook, в котором можно будет размещать не только картинки но и любой другой контент, кто не видел фесбуковкий лайтбокс снизу показано:
Будем конечно же использовать javascript как и в любых других lightbox’ах, но начнем мы с HTML и CSS.
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
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(); }
Ну а вот так он будет выглядеть с картинкой:
Вот теперь точно все.
До скорых втреч, дорогие посетители моего сайта!
С Вами был ваш Юрич!