Внешние 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 завершено! Нам не нужно скачивать плагины и писать сложные функции, всего несколько строк кода. Нажмите «Демо», чтобы увидеть, как это работает. Также можете скачать исходники и посмотреть, как это работает локально, на вашем компьютере.