X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2020-11-25
  • 50149 просмотр

    93 комментарий

  • Дизайн и разработка сайта

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

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

Модальное окно с задержкой и куками

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



Пример

Плагины и Шаблоны для WordPress

Для начала добавляем 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", "", { expires:0, path: '/' });
$("#bg_popup").hide();
});

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

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

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

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

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

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

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

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

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

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

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

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 64, в среднем: 4.7 из 5
Читайте также
Опубликовано 93 комментария

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.