Всплывающее окно при первом посещении сайта на jQuery

Представляю вашему вниманию гостевой пост от Сергея Предводителева, одного из разработчиков Арктической Лаборатории .

* * *

На некоторых сайтах необходимо при первом посещении показывать посетителю информацию во всплывающем окне. Это может потребоваться, например, для сайтов некоторых тематик, чтобы узнать возраст посетителя. Ещё один вариант использования данного функционала — рассказать кратко о цели сайта.

Для реализации такого функционала мы будем использовать jQuery и несколько плагинов к нему.

Чтобы показывать всплывающие окна воспользуемся плагином arcticModal . Этот плагин, в отличие от многих других, позволяет очень просто кастомизировать внешний вид модальных окон.

Для того, чтобы показать окно лишь один раз, будем запоминать в куках, что посетитель заходил на сайт. Работу с куками нам обеспечит небольшой плагин с простым именем cookie.

Подключаем необходимые файлы

Если на вашем сайте не подключен jQuery, то подключим его. Используем CDN Яндекса. Вставляем этот код внутри тега <head></head>:

<!-- 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. Как будут выглядеть окна, можно посмотреть на сайте плагина .

<!-- 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 дней, т. е. в течение года после посещения сайта мы не будем показывать окно. При каждом посещении кука обновляется.

Ссылки

Опубліковано: 02/04/13 @ 06:55
Розділ javascript

SEO Блог