Всплывающее окно при первом посещении сайта на jQuery c cookies
- 18 октября, 2022
- 6:14 пп
- Нет комментариев
На некоторых сайтах необходимо при первом посещении показывать посетителю информацию во всплывающем окне. Это может потребоваться, например, для сайтов некоторых тематик, чтобы узнать возраст посетителя. Ещё один вариант использования данного функционала — рассказать кратко о цели сайта.
Для реализации такого функционала мы будем использовать jQuery и несколько плагинов к нему.
Чтобы показывать всплывающие окна воспользуемся плагином arcticModal. Этот плагин, в отличие от многих других, позволяет очень просто кастомизировать внешний вид модальных окон.
Для того, чтобы показать окно лишь один раз, будем запоминать в куках, что посетитель заходил на сайт. Работу с куками нам обеспечит небольшой плагин с простым именем cookie.
Подключаем необходимые файлы
Если на вашем сайте не подключен jQuery, то подключим его. Используем CDN Яндекса. Вставляем этот код внутри тега
:
<!-- jQuery -->
<script src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>
Теперь займёмся плагином для всплывающих окон. Скачиваем arcticModal c официального сайта и подключаем его:
<!-- arcticModal -->
<script src="arcticmodal/jquery.arcticmodal.js"></script>
<link rel="stylesheet" href="arcticmodal/jquery.arcticmodal.css">
Не будем придумывать стиль оформления окна и подключим одну из стандартных тем arcticModal. Как будут выглядеть окна, можно посмотреть на сайте плагина. или с текущего сайта jquery.arcticmodal-0.3
<!-- arcticModal theme -->
<link rel="stylesheet" href="arcticmodal/themes/simple.css">
Если вам не подходит такое оформление, то его можно легко исправить, обладая даже небольшими знаниями 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>
(function($) {
$(function() {
// Проверим, есть ли запись в куках о посещении посетителя
// Если запись есть - ничего не делаем
if (!$.cookie('was')) {
// Покажем всплывающее окно
$('#boxUserFirstInfo').arcticmodal({
closeOnOverlayClick: false,
closeOnEsc: true
});
}
// Запомним в куках, что посетитель к нам уже заходил
$.cookie('was', true, {
expires: 365,
path: '/'
});
})
})(jQuery)
</script>
Параметр closeOnOverlayClick при вызове arcticModal определяет, будет ли закрываться окно при клике на оверлее (слою, перекрывающему весь контент, т. е. при клике вне окна), а параметр closeOnEsc — при нажатие кнопки Esc.
Параметр expires при сохранении записи в куках задаёт время хранения куки в днях. В нашем случае 365 дней, т. е. в течение года после посещения сайта мы не будем показывать окно. При каждом посещении кука обновляется.
Похожие записи
