• 02 Авг 2015г
• 15120
• 81
• Рубрика: Web-дизайн

Всплывающее окно при загрузке странице показывается один раз с задержкой

Доброго времени суток. 🙂

Данную статью пишу благодаря одному из посетителей моего сайта - Александру Зарко. Александр в одной из статей про модальные окна, задал вопрос, как сделать так, чтобы окно появлялось лишь один раз для каждого посетителя? Так же оно должно появляться с задержкой. У меня есть урок - Всплывающее модальное окно при загрузке сайта с задержкой, но появляется оно постоянно, при каждой загрузке страницы. Возможно для лендинга это нормально, но для многостраничного сайта - это кошмар, потому как посетителя просто будет напрягать постоянное открытие окна при загрузке каждой из них.

Поэтому встал вопрос, как к нему прикрутить куки(cookie), чтобы окно появлялось хотя бы раз в сутки, ну или больше если это нужно. Чтобы это сделать, нужно немного вносить изменения и скрипты будут отличаться от предыдущей статьи, так что выложу все заново уже как надо, чтобы всем было понятно.

Для начала добавляем HTML разметку, то бишь код самого окна. Внутрь окна добавляете все что Вам нужно и все, что хотите увидеть. Главное что нельзя трогать - это кнопка закрытия окна. Наш будущий скрипт будет записывать куки, как раз после нажатия на нее. То есть когда посетитель нажал на крестик, браузер запомнит, что окошко больше не показывать.

<div id="bg_popup">
  <div id="popup">
  <a  id="setCookie" class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a>
<h1>Пример</h1>
<p>Модальное окно с задержкой в 4 секунды, которое появляется раз в сутки.</p>
</div>
</div>

Далее в файле стилей задаем внешний вид и корректность отображения нашего окна.

 /*Модальное окно*/
#bg_popup{
position: fixed;
z-index: 99999;
background: rgba(0, 0, 0, 0.8);
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;}
  
#popup {
background:#fff;
width: 350px;
margin: 25% auto;
padding: 5px 20px;
position: relative;}
  
.close{
display:block;
position:absolute;
top:5px;
right:5px;
width:20px;
height:20px;
color:#555;
background:#1BA600;
cursor:pointer;}

Третьим шагом будет уже подключение скриптов. Для начала нужно подключить библиотеку jQuery в шапку перед закрывающимся head или в подвал перед закрывающимсяbody. Но сначала посмотрите, не сделано ли это ранее, иначе возможен конфликт.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>  

Дальше подключаем файл запись на куки. Данный файл нужно скачать - jquery.cookie.js

Подключить файл куков нужно после библиотеки указав путь к папке, где вы его расположили, если он находится в той же папке где и файл с html, то просто его название.

<script src="jquery.cookie.js"></script>

В конце осталось лишь добавить скрипт, который будет все это обрабатывать.

<script type="text/javascript">
$(document).ready(function(){
$("#setCookie").click(function () {
$.cookie("popup", "24house", {expires: 0} );
$("#bg_popup").hide();
});

if ( $.cookie("popup") == null )
{
setTimeout(function(){
$("#bg_popup").show();
}, 4000)
}
else { $("#bg_popup").hide();
}
});
    </script>

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

В четвертой строке задаем время, сколько будут хранится куки. В данном случаи окно будет появляться раз в сутки. Если нужно больше, то просто измените в третьей строке значения, например на 3 дня:

$.cookie("popup", "3", {expires: 3} );

Для тех, кому нужно не в днях, а в минутах, то 4 строку нужно заменить на вот такие три строки:

var date = new Date();
date.setTime(date.getTime() + (60 * 1000));
$.cookie("popup", "", {expires: date} );

60 * 1000 - это одна минута, 60 * 3000 - это три минуты, ну и так далее.

Также в скрипте есть значение 4000 - это миллисекунды и равно все это 4 секундам. Это время задержки появления окна. По нужде меняете и окно появится в нужный момент.

Вот и все, что нужно сделать. Мы к старому окну добавили новый скрипт и куки. Окно подключать можно любое, главное указать в последнем скрипте ID кнопки закрытия, в данном случаи - #setCookie, и указать ID окна, сейчас - #bg_popup. Любое окно будет появляться с задержкой и только один раз.

Есть еще один момент. Куки будут работать, если Вы загрузите все это на хостинг. На локальном хранилище работать может только в Мозиле в то время как Хром и Опера будут постоянно показывать окно. Когда-то я уже с этим сталкивался и потратил не мало времени, так что, чтобы проверить нужно делать это прям на сайте, а не запускать с рабочего стола.

На этом все, спасибо за внимание. 🙂