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

В век рекламы и активно развитой структуры социальных сетей, частенько заходя на сайты, видишь всплывающее окно, которое сообщает об акции или просто просит «рассказать друзьям». Именно эту задачу мы будем решать в сегодняшней статье.

Содержание:

1) Немного о принципе работы
2) Пример всплывающего окна в CMS OsClass
3) JavaScript не в шапке
4) Окно в html

Немного о принципе работы

Давайте разберём принцип работы всплывающего окна, которое пользователь увидит только один раз при загрузке сайта. Дело в том, что такие окна используют в своей основе программный сценарий на JavaScript, который создаёт в браузере пользователя запись. Такую запись называют куком (cookie — ‘печенье’ — это фрагмент данных, которые отправляет веб-сервер на компьютер пользователя). В ней сообщается о том, что пользователь уже был на вашем сайте. При следующем попадании пользователя на сайт скрипт (программный сценарий) увидит файл cookie на компьютере и не будет показывать всплывающее окно. Таким образом вы убережёте свой сайт от назойливости всплывающего окна. Срок хранения куков измеряется в сутках и регулируется в программном сценарии, а значит окно может появляться каждый день, раз в неделю, раз в месяц или раз в год.

Сразу хочу сказать СПАСИБО Dimox за предоставленный работающий код.

 

Пример всплывающего окна в CMS OsClass

В моей практике приходилось делать сайт доски объявлений, на которой при загрузке страницы раз в неделю отображается всплывающее окно с просьбой «рассказать друзьям» в социальных сетях. Ещё в этом окне периодически размещается реклама и информация об акциях. Доска объявлений выполнена на CMS OsClass с темой Bender. На её примере я покажу установку всплывающего окна на сайт.

Screen Shot 2014-07-24 at 01.39.03

 

JavaScript не в шапке

И так, приступим. Для начала скачаем плагин для всплывающего окна arcticModal. Затем в корневой папке сайта создаём раздел arcticmodal.

Screen Shot 2014-07-24 at 01.49.26

Теперь в этот раздел переносим содержимое архива, который мы скачали на официальном сайте arcticModal. Для удобства переименуйте названия файлов:

  • jquery.arcticmodal-0.3.css
  • jquery.arcticmodal-0.3.min.js

Screen Shot 2014-07-24 at 01.49.49

Не будем нагружать нашу OsClass лишними скриптами в файле header.php или head.php (oc-content/themes/bender/common/), так как я решил делать всплывающее окно только при загрузке главной страницы сайта, а значит все работы будем вести в файле main.php (oc-content/themes/bender/). Открываем его и находим строки:

</div><!-- main -->
<div id="sidebar">

Между ними мы вставим строки, которые подключат arcticModal.

 <!-- arcticModal -->
 <script src="arcticmodal/jquery.arcticmodal-0.3.min.js"></script>
 <link rel="stylesheet" href="arcticmodal/jquery.arcticmodal-0.3.css">

Ниже  подключим стиль всплывающего окна

 <!-- arcticModal theme -->
 <link rel="stylesheet" href="arcticmodal/themes/simple.css">

Дальше нужно подключить плагин для работы с файлами cookie от yandex

 <!-- cookie -->
 <script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>

А теперь настало время для программного сценария, благодаря которому наше окно будет появляться один раз при загрузке главной страницы сайта на OsClass:

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

Прошу заметить, что параметр expires задаёт количество дней для хранения кука (в примере указано 7 дней, а значит всплывающее окно будет показано один раз в неделю)

 

Окно в html

Следующей строкой после скрипта вставим код для всплывающего окна, внутри которого будут отображаться кнопки социальных сетей с количеством кликов «рассказать друзьям».

 <div style="display: none;">
 <div class="box-modal" id="boxUserFirstInfo">
 <div class="box-modal_close arcticmodal-close">X</div>
 <div align="center" style="margin-top: 30px; margin-bottom: 10px;">
 <?php _e('Tell friends', 'bender') ; ?>
 <p><script type="text/javascript" src="//yandex.st/share/share.js"
 charset="utf-8"></script>
 <div class="yashare-auto-init" data-yashareL10n="ru"
 data-yashareQuickServices="vkontakte,facebook,twitter,gplus" data-yashareTheme="counter"></div> </p>
 </div>
 </div>
 </div>

Screen Shot 2014-07-24 at 01.54.56

Таким образом, просто и быстро можно добавить красивое и удобное всплывающее окно на сайт. Его плюс в том, что можно установить любой срок жизни файла cookie, начиная от 1-го дня, и доступность файла css для изменения цветовой палитры и прочего.

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

На этом всё. Подписывайтесь на новости, рассказывайте друзьям в социальных сетях и читайте блог.

end