Войти Регистрация

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


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

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

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

jquery popup окно

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

  • Мы хотим, чтобы оно центрировалось на странице сайта, при его выводе.
  • Должна быть кнопочка «закрыть», или что-то подобное.
  • Когда мы кликнем вне блока – 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 графики: создайте красивые графики для вашего приложения


Дискуссия по теме    60 Комментариев
Добавить комментарий
Victor 16.07.2016 ? 00:45
Как сделать вывод окна по умолчанию? Без клика? И можно ли подключить куки? Например не выводить пользователю окно если он его закрыл? После 7 дней опять включить его вывод и т.д. Спасибо.
Taras 18.07.2016 ? 14:40
Все можно! Для этого вызываем триггер на ссылку (которая должна открыть попап окно). А с куками можно так, подключаете плагин jquery http://github.com/carhartl/jquery-cookie И сохраняете переменную после закрытия окна. Если ее не находите в куках, то не вызываете триггер.
Алексей 15.12.2015 в 22:14
"Заметьте, имя класса ссылки и id div блока имеют те же значения. Это для связи этих элементов." Но ведь class ссылки="popup-link-1" а id дива="popup-box-1"
Дмитрий 23.10.2015 в 09:32
Здравствуйте! у меня такая проблема - если я размещаю это окно на чистой странице, то всё нормально. а если я располагаю то же окно на своём сайте (весь код тот же самый), оно располагается не по центру, а справа снизу от центра. в чём может быть причина?
Тарас 27.10.2015 в 16:27
Попробуйте вставить сам код окна после тега body, или на один родительский тег выше...
Саша 20.09.2015 в 16:52
большое спасибо за этот урок!
Михаил 28.07.2015 в 16:43
У меня следующая проблема. Есть страница-вьюха с JQuery скриптом-обработчиком и страница-контролер, которая выводит в DIV основном страницы необходимый контент. Внутри этого DIV я передаю ссылку с необходимым классом "popup-link-1", но обработчик основной страницы, как я понял, ее не находит в диве и при нажатии на ссылку основная страница просто обновляется. Если же ссылку разместить не в DIV, а просто на основной странице - то все работает исправно. Подскажите, пожалуйста, что делать в таком случае?
Тарас 07.08.2015 в 19:59
Здравствуйте. Сложно определить что именно не так из того, что вы описали. Было бы не плохо посмотреть пример в онлайне. Если возможно, дайте ссылку...
Виталий 25.06.2015 в 19:01
$('[class*=popup-box]').click(function(e) { /* Предотвращаем работу ссылки, если она является нашим popup окном */ e.stopPropagation(); }); Как в этой конструкции исключить ссылки из дива с определенным идентификатором? Это вообще возможно? Помогите, пожалуйста.
Витали 25.06.2015 в 18:35
Спасибо за отличную статью. Подскажите, пожалуйста, как в popup окне правильно разместить слайдер. В часности интересует sudoSlider. Почему то у меня не работают customLinks.
Андрей 29.05.2015 в 21:26
Добрый день. Хотел бы уточнить следующее. Можно ли писать текст <div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2>test</h2></div><div class="bottom"><a href=".... /a></div></div>') в самом html файле ,а затем этот текст передавать в js , чтобы не писать кучу js файлов, а сделать один и вызывать этот файл из любой части страницы? Спасибо.
Имя 20.05.2015 в 23:30
Спасибо! очень помогли!
Ваня 20.05.2015 в 18:25
Добрый день товарищи! очень помогла ваша статья) но только один вопрос возник, если я буду в окне выводить картинку, высота которой больше высоты экрана и она вся не умещается, как мне добавить возможность прокрутить страницу что бы посмотреть всю картинку, то есть как добавить скролл в поп ап окно? очень надо, буду признателен! Спасибо и успехов!
Тарас 20.05.2015 в 23:19
Привет! рад что был полезен ) вот это свойство добавить в css класс попап окна: overflow: scroll; /* Добавляем полосы прокрутки */
Vijit 20.11.2014 в 11:04
>не нужно ... писать сложные функции, всего несколько строк кода В этом кроется тонкий юмор? :) Учитывая листинги, приведенные в выше в статье вряд ли можно говорить о "нескольких строках". Но вообще реализация хорошая, спасибо.
Alex 15.11.2014 в 15:51
Взял ваш код, вставил в свою программку и столкнулся с проблемой: при нажатии на кнопку X закрытия окна #blackout не закрывается. Не могли бы Вы подсказать в чем может быть дело ?
Алексей 05.09.2014 в 22:39
Спасибо за доходчивое объяснение! Скажите, а как задать условие появления окна в момент, когда посетитель уводит мышку на панель вкладок, то есть из поля отображения сайта. А так же, после определённого времени активности на сайте. Хочу создать урезанную версию callbackhunter
barist 31.08.2014 в 19:04
Как вы организовали плавное опускание комментариев?
barist 31.08.2014 в 18:54
Огромное тебе человеческое спасибо)) Все работает, правда непонятен один момент. У меня див #blackout ни на что не влияет и поэтому немного не ясно как именно его прописывать . Ставил и отдельным дивом,первым сверху и ставил его оберткой и вообще без него в верстке все работае. по идее так не должно быть. А так я сутки промучался пока нашел что то внятное. js еще толком не знаю, только на уровне пользователя.
Дмитрий 09.08.2014 в 17:40
Добрый день, подскажите как сделать более 10 popyp окон, что именно на что нужно изменить? За ранее большое спасибо.
Павел 06.07.2014 в 16:07
Как сделать определенный размер окна, например 760*500?
Александр 04.06.2014 в 13:42
К сожалению у меня окно появляется не по центру, как-то можно это изменить?
Максим 08.05.2014 в 11:06
Все таки окон мало. Мне, к примеру нужно 12, а не 10. Я немного переделал код, определяя id двумя знаками (цифрами): /* Получаем id (последний номер в имени класса ссылки) */ var name = $(this).attr('class'); var id = name[name.length - 2] name[name.length - 1] ; Ста блоков вполне хватает, только нумерация будет из двух цифр. Седьмой блок, к примеру, выглядит так: <a class="popup-link-07" href=""></a> <div class="popup-box" id="popup-box-07"> Вопрос, можно ли данным инструментом сделать замедленное всплывание блока?
Сергей 28.02.2014 в 01:51
Здравствуйте, объясните пожалуйста на пальцах как сделать несколько окон на странице, то есть что вставлять в ссылки, если в первой ссылке "popup-link-1" то во второй должно быть? "popup-link-2" и если это правильно как к этому привязать контент, как обрамлять сам контент и что изменить в скрипте.
Тарас 28.02.2014 в 05:35
Все верно. Ссылка с классом popup-box-1 будет открывать окно с аналогичным ид popup-box-1. Надо еще одно окно, создаете ссылку с popup-box-2 и конструкцию html c ид popup-box-2. Максимально можно вставить на страницу 10 окон (нумерация 0-9), так как js код берет ОДИН последний символ за идентификатор, разве что будете называть следующие окна буквами popup-box-a, popup-box-b, popup-box-c... тогда больше.
Сергей 28.02.2014 в 10:38
Под HTML конструкцией вы имеете ввиду вот этот код? $(document).ready(function() { $('body').append('<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2>Привет! Это демо окно!</h2></div><div class="bottom">Вот чем мы занимаемся на сайте <a href="http://sitear.ru">sitear.ru</a>! Создаем всякие штучки для сайта. Продвигаем и монетизируем. Если вам понравилось это окно, можете поделиться этим уроком в соц. сетях. Это действительно помогает нашему сайту!</div></div>'); $('body').append('<div id="blackout"></div>'); и поменять надо как я понимаю вот здесь <div class="popup-box" id="popup-box-2"> вот так?
Тарас 28.02.2014 в 19:04
Все верно. Только эту строку всего один раз: $('body').append('<div id="blackout"></div>'); то полупрозрачная тень страницы... ее не надо повторять с каждым новым окном. В демо, html конструкции вставляются с помощью js, Вы можете писать конструкции просто в html, или выводить html через php, разницы не будет.
craf 19.01.2014 в 22:08
это окно не центрируется по центру вертикально. только горизонтальное центрирование
Тарас 21.01.2014 в 07:20
Все верно, потому что не известно количество контента в окне. Задается только отступ от верха рабочей области: var disHeight = scrollPos 150;
Anon 09.12.2013 в 18:38
Cлишком сложно для новичков, ИМХО. Можно поступить намного проще, причем вариантов несколько.
михаил 21.10.2013 в 00:03
<a class="popup-link-<?php echo $paru2['id']; ?>" href=#>Написать сообщение</a><br> <div class="popup-box" id="popup-box-<?php echo $paru2['id']; ?>"> <div class="close">X</div> <div class="top"> <h2>sms:</h2> </div> <div class="bottom"> text </div> </div> Вот такой код вывожу в цикле, ни одно окно не открывается... как надо оработать скрипт javascript.js - чтобы открывалось пустое окно по нажатию на различные ссылки. Т.е. можно было бы выводить всплывающее окно для отпраки например сообщений разным пользователям?
Тарас 22.10.2013 в 16:48
Проверьте исходный код элемента (окна). Если у вас ID берется с базы данных, то там длинное число... здесь возможно сделать только 10 окон с идами 0-9. Смотрите эту строку var id = name[name.length - 1]; - переменная получает последний символ класса ссылки. То есть если класс popup-link-1, будет 1. Если у вас 5 окон с идами 111, 112, 121, то скрипт будет брать только последние номера, соотвественно 1, 2, 1. Хотите много окон, усовершенствуйте этот блок кода: /* Получаем id (последний номер в имени класса ссылки) */ var name = $(this).attr('class'); var id = name[name.length - 1];
Сергей 13.08.2013 в 05:19
Данный кошмар заменит всего одна функция <script> $(function() { $( "#dialog" ).dialog(); }); </script>
Тарас 14.08.2013 в 00:40
Для этой функции необходимо подключать ui виджеты. Мы здесь рассматриваем именно создание popup окна, готовых решений много существует.
malbur 08.07.2013 в 16:42
Меня вот это смущает: var id = name[name.length - 1]; Работает если id < 10 ))
Тарас 08.07.2013 в 22:55
Ну да, получается можно создать максимум 10 окон на странице. Надо переделывать под свои нужды.
John LapTev 28.06.2013 в 01:19
$("#popup-box-1 div.bottom").load("/files/bookkupol/index.html"); Эту строку в JS код вставлять, заместо строки: $('body').append('<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2>Привет! Это демо окно!</h2></div><div class="bottom">Создаем всякие штучки для сайта.</div></div>'); ? --- А если у меня планируется не одно попап окно?
Тарас 29.06.2013 в 23:35
Нет. Вставлять после этой строки: $('[class*=popup-link]').click(function(e) { А если не одно окно, тогда код будет следующим: $('[class*=popup-link]').click(function(e) { /* Предотвращаем действия по умолчанию */ e.preventDefault(); e.stopPropagation(); /* Получаем id (последний номер в имени класса ссылки) */ var name = $(this).attr('class'); var href = $(this).attr('href'); var id = name[name.length - 1]; var scrollPos = $(window).scrollTop(); $("#popup-box-" id " div.bottom").load(href);
Тарас 30.06.2013 в 00:41
Система вырезает знак плюс в комментариях, в последней строке должно быть так: $("#popup-box-"ПЛЮСidПЛЮС" div.bottom").load(href);
John LapTev 27.06.2013 в 22:21
Здравствуйте! У меня на картине стоит ссылка на отдельную html страницу. <a class="popup-link-1" href="/files/bookkupol/index.html"> <img onmouseover="this.src='/files/storage/book1(ef).png' У Вас в JS код такой: $('body').append('<div class="popup-box" id="popup-box-1"> <div class="close">X</div> <div class="top"><h2>Привет! Это демо окно!</h2> </div><div class="bottom">Создаем всякие штучки для сайта.</div></div>'); ------- Как мне сделать что бы в попап окне открывалась другая html страница?
Тарас 28.06.2013 в 00:36
$("#popup-box-1 div.bottom").load("/files/bookkupol/index.html"); Если попап окно планируется одно на странице, то эту строку вставить в функцию обработки клика по ссылке: $('[class*=popup-link]').click(function(e) { $("#popup-box-1 div.bottom").load("/files/bookkupol/index.html");
Александр 10.04.2013 в 13:43
А куда его ставить? Извините, я не силен в js, подозреваю что надо заменить $('[class*=popup-link]').click(function(e) {... пробовал заменять на Ваш код и на: $(document).load(function(e) {... ничего не происходит
Тарас 20.04.2013 в 17:03
Должно выглядеть так: $(document).load(function(e) {... $('[class*=popup-link]').click(function(e) {... }); $('.popup-link-1').trigger('click'); });
Александр 09.04.2013 в 10:31
Добрый день. Подскажите как сделать чтобы окно открывалось при загрузке страницы автоматически, а не по нажатию на ссылку?
Тарас 10.04.2013 в 01:02
Можно так: $('.popup-link-1').trigger('click');
Igor 08.04.2013 в 18:07
В IE 7 и 8 не работает, подскажите может есть какой нибудь "костыль" для них?
Показать более ранние комментарии (14) →
Добавить комментарий
Просмотров: 65994