Всем привет! Часто бывает, что на некоторых сайтах необходимо при первом посещении показывать посетителю информацию в виде всплывающего окна (акции, уведомления, поздравления). Также это может потребоваться, например, для сайтов некоторых тематик, чтобы узнать возраст посетителя. Ещё один вариант использования данного функционала — рассказать кратко о цели сайта. Чтобы создать всплывающее окно на JQuery только при первом заходе на сайт заюзаем jQuery и несколько плагинов.
Для отображения всплывающего окна воспользуемся плагином arcticModal. Этот плагин, в отличие от многих других, позволяет очень просто изменять внешний вид модальных окон, часто это бывает трудно делать, особенно если большая часть кода генерируется библиотекой.
Для того, чтобы показать окно лишь один раз, будем сохранять в куках информацию о том, что посетитель заходил на сайт. Работу с куками нам обеспечит стандартный плагин cookie.
Используем CDN Яндекса, подключаем в том случае, если JQuery не использовался. Вставляем этот код внутри тега <head></head>:
<script src="http://yastatic.net/jquery/2.1.3/jquery.min.js"></script>
Качаем плагин arcticModal c официального сайта и подключаем:
<script src="js/jquery.arcticmodal-0.3.min.js"></script> <link rel="stylesheet" href="css/jquery.arcticmodal-0.3.css">
Для оформления окна одключим одну из стандартных тем arcticModal. Как будут выглядеть окна, можно посмотреть на сайте плагина.
<link rel="stylesheet" href="css/themes/simple.css">
Если вам не подходит такое оформление, то его можно легко исправить, обладая даже небольшими знаниями CSS.
Подключаем плагин cookie:
<script src="http://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script>
Всё, что было нужно, подключено, теперь напишем код всплывающего окна с информацией для пользователя:
<div style="display: none;"> <div class="box-modal" id="my_window"> <div class="box-modal_close arcticmodal-close">закрыть</div> <b>Привет, Мир!</b><br> <br> Привет, Мир!) </div> </div>
В коде используется класс arcticmodal-close. При клике на элемент с таким классом окно будет закрываться.
Логика обработки куки (запоминаем посетителя):
<script>
(function($) {
$(function() {
//Ищем посетителя в куке
//Если не находим, то выводим окно
if (!$.cookie('you_are_was_hear')) {
$('#my_window').arcticmodal({
closeOnOverlayClick: false,
closeOnEsc: true
});
}
//Запоминаем посетителя на год
$.cookie('you_are_was_hear', true, {
expires: 365,
path: '/'
});
})
})(jQuery)
</script>
closeOnOverlayClick - параметр определяет будет ли закрываться окно при клике по области вне самого окна;
closeOnEsc - параметр определяет будет ли закрываться окно при на жатии на клавишу Esc;
expires - параметр, отвечающий за время хранения куки в днях.
Вот и все) благодарю за внимание! Пишите в комментариях какой урок выпустить следующим, плюс есть идея выпустить серию уроков по созданию маленькой социальной сети на PHP, жду Ваших мыслей по этому поводу) Кстати, обращаем внимание и на другие уроки, такие как модальное окно на JavaScript и модальное окно подтверждения JavaScript. Всех благ и удачи!)