Создание сайтов. Веб Студия «sOn»

Категории
Информация

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

Автор admin 12.06.2017 0 Комментарии

 

Как сделать всплывающее модальное окно, чтобы оно появлялось один раз для каждого посетителя при загрузке сайта с небольшой задержкой?

 

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

 

Пример:

 

Шаг 1.

 

Пишем  HTML-разметку модального окна. Внутрь окна добавляем все, что нам  необходимо, т.е. текст, картинки или элементы, которые вы хотите увидеть во всплывающем окне.

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

 

При написании своего кода будьте осторожны  - 3 строка вышеприведенного кода - это кнопка закрытия окна. Наш будущий скрипт будет записывать куки после нажатия на нее. Это означает, что при нажатии на крестик, браузер запомнит, что окошко больше не следует показывать в течение установленного скриптом времени.

 

Шаг 2.

 

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

/*Модальное окно*/
#modal_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;
}

 

Шаг 3.

 

Подключим скрипты.

 

Для начала нужно подключить библиотеку 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" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>

 

Шаг 4.

 

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

<script type="text/javascript">
$(document).ready(function(){
$("#setCookie").click(function () {
$.cookie("popup", "24house", {expires: 0} );
$("#modal_popup").hide();
});
if ( $.cookie("popup") == null )
{
setTimeout(function(){
$("#modal_popup").show();
}, 3000)
}
else { $("#modal_popup").hide();
}
});
</script>

 

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

 

В четвертой строке задаем время, сколько будут хранится куки. В вышеуказанном случае окно будет появляться один раз в сутки. Если нужно больше, то просто измените в третьей строке значения, например на 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 - это три минуты, ну и так далее.

 

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

 

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

 

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

Комментарий