Создаем jQuery popup окно

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

Что мы создадим?

В этом уроке мы создадим простое и красивое popup окно на jquery. Оно будет похоже на то, что используется в twitter. Естественно, вы сможете придать стиль, какой вам по душе.

Каким функционалом будет обладать окно?

• Мы хотим, чтобы оно центрировалось на странице сайта, при его выводе.
• Должна быть кнопочка «закрыть», или что-то подобное.
• Когда мы кликнем вне блока – popup окно закроется автоматически.
• Когда окно выведено, страница должна покрываться тенью, чтобы пользователь мог сфокусироваться.

Начнем разработку

Для реализации popup окна, мы будем использовать CSS и несколько строк jQuery кода, ну и само собой HTML. Заметьте, что для воплощения нашей идеи, не нужно никаких плагинов и дополнительных инструментов, все очень просто и надежно!

Создадим ссылку с определенным классом и div блок с идентичным id. Вот так:

<a class="popup-link-1" href="">Click me</a>
 
<div class="popup-box" id="popup-box-1">
    <div class="close">X</div>
    <div class="top">
        <h2>Some Title Goes Here:</h2>
    </div>
    <div class="bottom">
        Some more content, for when you want to add a little bit more
    </div>
</div>

Заметьте, имя класса ссылки и id div блока имеют те же значения. Это для связи этих элементов. Перед тем, как перейдем к написанию jQuery кода, добавим немного css стилей для окна.

.popup-box {
    position: absolute;
    border-radius: 5px;
    background: #fff;
    display: none;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
    font-family: Arial, sans-serif;
    z-index: 9999999;
    font-size: 14px;
}
 
.popup-box .close {
    position: absolute;
    top: 0px;
    right: 0px;
    font-family: Arial, Helvetica, sans-serif;  
    font-weight: bold;
    cursor: pointer;
    color: #434343;
    padding: 20px;
    font-size: 20px;
}
 
.popup-box .close:hover {
    color: #000;
}
 
.popup-box h2 {
    padding: 0;
    margin: 0;
    font-size: 18px;
}
.popup-box .top {
    padding: 20px;
}
 
.popup-box .bottom {
    background: #eee;
    border-top: 1px solid #e5e5e5;
    padding: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
 
#blackout {
    background: rgba(0,0,0,0.3);
    position: absolute;
    top: 0;
    overflow: hidden;
    z-index: 999999;
    left: 0;
    display: none;
}

Мы определим некоторые другие CSS стили в JavaScript коде.  Эти стили требуют дополнительных вычислений, поэтому лучше будет сделать это с помощью jQuery. Давайте перейдем к javascript коду.

jQuery код popup окна

Для начала, подключите jQuery файл библиотеки. После чего, инициализируем jQuery и добавляем div #blackout в тело документа. Также определяем ширину popup окна.

$(document).ready(function() {
 
    $('body').append('<div id="blackout"></div>');
     
    var boxWidth = 400;

Далее, создаем функцию, которая центрирует окно. Ранее мы установили absolute позиционирование в CSS, мы не можем использовать margin: 0px auto; нам необходимо определить ширину экрана, отнять от этого ширину popup окна, и все это разделить на 2. Высотой будет текущая позиция скролла, плюс где-то 150px.

Немного ранее мы создавали #blackout div, это для накрытия тенью контента страницы. Теперь нам нужно убедиться, что этот блок будет иметь ширину и высоту идентичную монитору. Это также рассчитывается в этой функции.

function centerBox() {
     
    /* определяем нужные данные */
    var winWidth = $(window).width();
    var winHeight = $(document).height();
    var scrollPos = $(window).scrollTop();
     
    /* Вычисляем позицию */
     
    var disWidth = (winWidth - boxWidth) / 2
    var disHeight = scrollPos + 150;
     
    /* Добавляем стили к блокам */
    $('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
    $('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
     
    return false;       
}

Эта функция должна запускаться 3 раза. Когда пользователь использует скроллинг, когда пользователь изменяет размер окна, также изначально, когда загружается страница.

$(window).resize(centerBox);
$(window).scroll(centerBox);
centerBox();    

В конце, нам нужно установить события кликов. Когда пользователь кликает в область вне окна, оно должно закрыться. Когда пользователь нажал на «X», окно также должно исчезнуть. В случае кликов внутри popup окна, ничего не должно происходить. В коде добавлены комментарии, чтобы проще было разобраться.

    $('[class*=popup-link]').click(function(e) {
     
        /* Предотвращаем действия по умолчанию */
        e.preventDefault();
        e.stopPropagation();
         
        /* Получаем id (последний номер в имени класса ссылки) */
        var name = $(this).attr('class');
        var id = name[name.length - 1];
        var scrollPos = $(window).scrollTop();
         
        /* Корректный вывод popup окна, накрытие тенью, предотвращение скроллинга */
        $('#popup-box-'+id).show();
        $('#blackout').show();
        $('html,body').css('overflow', 'hidden');
         
        /* Убираем баг в Firefox */
        $('html').scrollTop(scrollPos);
    });
     
    $('[class*=popup-box]').click(function(e) { 
        /* Предотвращаем работу ссылки, если она являеться нашим popup окном */
        e.stopPropagation(); 
    });
    $('html').click(function() { 
        var scrollPos = $(window).scrollTop();
        /* Скрыть окно, когда кликаем вне его области */
        $('[id^=popup-box-]').hide(); 
        $('#blackout').hide(); 
        $("html,body").css("overflow","auto");
        $('html').scrollTop(scrollPos);
    });
    $('.close').click(function() { 
        var scrollPos = $(window).scrollTop();
        /* Скрываем тень и окно, когда пользователь кликнул по X */
        $('[id^=popup-box-]').hide(); 
        $('#blackout').hide(); 
        $("html,body").css("overflow","auto");
        $('html').scrollTop(scrollPos);
    });
});

На этом, создание popup окна на jQuery завершено! Нам не нужно скачивать плагины и писать сложные функции, всего несколько строк кода. Нажмите «Демо», чтобы увидеть, как это работает. Также можете скачать исходники и посмотреть, как это работает локально, на вашем компьютере.

Остались вопросы? Задайте их в комментариях ниже.

Демо Скачать исходники (0 Mb.)

Дальше: JQuery + xCharts графики: создайте красивые графики для вашего приложения