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

И снова — здравствуйте!

Рад Вас видеть на моем блоге, посвященному в основном вордпресс, верстке и программированию.

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

Facebook-Pages-Popup-Box

Будем конечно же использовать 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;
}

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

light-1

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

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

screen2

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

До скорых втреч, дорогие посетители моего сайта!

С Вами был ваш Юрич!


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Заказать сайт