» » » Всплывающее окно при первом посещении сайта [JS]

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

Название: Всплывающее окно при первом посещении сайта
Автор: Dimox
CMS: Все
Тип скрипта: (JS/HTML)

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

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




Установка:
1. Распаковываем содержимое архива в папку с шаблоном и подключаем его, добавив между тегами:

<head></head>


Следующий код:

<script>  
(function($) {  
$(function() {  
  
  // Проверим, есть ли запись в куках о посещении посетителя  
  // Если запись есть - ничего не делаем  
  if (!$.cookie('was')) {  
  
      // Покажем всплывающее окно  
      $('#boxUserFirstInfo').arcticmodal({  
          closeOnOverlayClick: false,  
          closeOnEsc: true  
      });  
  
  }  
  
  // Запомним в куках, что посетитель к нам уже заходил  
  $.cookie('was', true, {  
      expires: 365,  
      path: '/'  
  });  
  
})  
})(jQuery)  
</script> 


2. Для вывода всплывающего окна с информацией для пользователя, между тегами:
<body></body>


Вставляем:
<div style="display: none;">  
  <div class="box-modal" id="boxUserFirstInfo">  
      закрыть  
      Здравствуй, милый человек!  
        
        Надеюсь тебе понравится на нашем сайте!  
        У нас много интересной информации и очень отзывчивое комьюнити.  
        Добро пожаловать :)  
    </div>  
</div>


  • Имя файла: jquery.arcticmodal-0.3.zip
  • Размер: 6,47 Kb
  • cкачиваний: 454
  • Md5: 7865396cc350fe8e34381428d467ff3e
  • Sha1: f12e7bfa0e08e6068bb96cfa8d9693da729643b5
  • Скачать


Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Комментарии

4
Так и не разобрался как поставить задержку перед появлением окна. Можете подсказать?
4
Сделал вывод виджетов лайков с соц.сетей
Годная вещь.
4

Michael

Посетители 7 января 2014 15:06
Помогите установить. Кроме кода, куда кидать файлы? И как подключить их?
Сайт создан в системе Ucoz.
----------------------------------------

Уже нашел ответ. Вот ссылка с более подробными инструкциями: http://dimox.name/popup-window-on-first-web-site-visit/
Вот только может кто то знает, как реализовать:
- чтобы запоминания в куках проходили только тогда когда пользователь закроет окно? (То есть не тогда когда просто обновит страницу или закроет и откроет сайт вновь)
- чтобы закрыть окно нужно было кликнуть по тексту объявления (ссылке)?

-----------------------------
unity3d-asset.ru

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.