Иногда на сайте надо показать информацию во всплывающем окне при первом посещении. Это можно использовать для предупреждения о возрасте или ненормативной лексики. Ещё один вариант использования данного функционала — рассказать кратко о цели сайта.
Чтобы это сделать мы будем использовать jQuery и некоторые плагины к нему. Для показа всплывающих окон мы воспользуемся плагином arcticModal. Этот плагин позволяет изменять внешний вид всплывающих окошек.
Чтобы окно показывалось только один раз, мы будем записывать информацию в куки. Для работы с куками будем использовать плагин Cookie.
Подключаем необходимые файлы
Для начала надо подключить jQuery, если он ещё не подключен.Используем CDN Яндекса (можно использовать Google, кому какой большое нравится). Вставляем данный код между тегами <head></head>:
<!-- jQuery --> <script src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>
Далее надо скачать плагин arcticModal с официального сайта тут и подключаем его вписывая код после кода jQuere:
<!-- arcticModal --> <script src="arcticmodal/jquery.arcticmodal.js"></script> <link rel="stylesheet" href="arcticmodal/jquery.arcticmodal.css">
Стандартные темы окошек можно посмотреть на официальном сайте. Нам же остается дописать ниже код темы:
<!-- arcticModal theme --> <link rel="stylesheet" href="arcticmodal/themes/simple.css">
Далее подключаем плагин Cookie (будем подключать тоже с Яндекса):
<!-- cookie --> <script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>
HTML
Теперь надо составить код всплывающего окна:
<div style="display: none;"> <div class="box-modal" id="boxUserFirstInfo"> <div class="box-modal_close arcticmodal-close">закрыть окно</div> <b>Приветствуем на нашем сайте!</b><br> <br> Добро пожаловать на наш сайт! </div> </div>
В коде используется класс arcticmodal-close. При клике на элемент с таким классом окно будет закрываться.
Код JS
А теперь надо написать скрипт, который будет делать всю работу:
<script>
// Проверим, есть ли запись в куках о посещении посетителя
// Если запись есть - ничего не делаем
if (!$.cookie('wasVisit')) {
// Покажем всплывающее окно
$('#boxUserFirstInfo').arcticmodal({
closeOnOverlayClick: false,
closeOnEsc: true
});
}
// Запомним в куках, что посетитель к нам уже заходил
$.cookie('wasVisit', true, {
expires: 30,
path: '/'
});
</script>Параметр closeOnOverlayClick при вызове arcticModal определяет, будет ли закрываться окно при клике на оверлее (слою, который перекрывает сайт), а параметр closeOnEsc — действие при нажатие кнопки Esc.
Параметр expires при сохранении записи в куках задаёт время хранения куки в днях. Мы выбрали 30 дней, т. е. в течение месяца после посещения сайта не будет показываться окно. При каждом посещении кука обновляется.
