Главная
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. Любое окно будет появляться с задержкой и только один раз.

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

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




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


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(21 голос, в среднем: 5 из 5)

Опубликован 31 комментарий

  • Alex
    Комментариев: 3

    Все работает!
    Большое Вам человеческое СПАСИБО!
    Отличный сайт!
    +++++

  • Борис
    Комментариев: 2

    Большое спасибо, все работает!
    Хотелось бы еще понять как установить не дни а минуты?!

    • Виталий
      Комментариев: 267

      Для Вас добавил в статье, читайте 🙂 Замените 4 строку на три новых и укажите количество минут.

    • Борис
      Комментариев: 2

      Огромное спасибо, за оперативность, все работает. Я только учусь js и многое недопонимаю возникла другая проблема, #setCookie я ставлю в кнопку формы Перезвоните мне и форма закрывается без отправки данных. Как убираю id форма работает но не работает cookie. Буду благодарен если сможете помочь. С уважением Борис.

      • Виталий
        Комментариев: 267

        #setCookie - это айди кнопки закрытия, когда на нее нажимаешь и происходит запись куков. А я не совсем понял, что Вам нужно, напишите мне в скайп, попробуем решить Вашу проблему.

  • Максим
    Комментариев: 1

    Большое спасибо, все работает!
    Подскажите пожалуйста, как еще реализовать такое, если в тексте окна есть ссылка на внутреннюю страницу, чтоб при нажатии на нее куки тоже срабатывали (окно не появлялось на следующей странице)

    Попробовал сделать так:
    ссылка
    Не получилось!

    • Виталий
      Комментариев: 267

      Здравствуйте.
      Ссылке на внутренюю страницу добавьте айди, например id="setCookie2",
      а во второй строке скрипта добавтье через запятую этот айди:
      $("#setCookie, #setCookie2").click(function () {

  • Андрій
    Комментариев: 1

    Довго шукав робоче попап вікно. Це єдине, яке підійшло! Дуже вдячний

  • Дмитрий
    Комментариев: 1

    Спасибо за статью!
    Мне только не понятно вот тут:
    if ( $.cookie("popup") == null )
    { setTimeout(function(){ $("#bg_popup").show();}, 4000)}
    else { $("#bg_popup").hide();
    }
    Зачем нужна ветка else? Мы ведь не даем команду на показ окна, зачем давать команду на его скрытие? Впрочем, пробую, возможно, найду объяснение в процессе)
    });

    • Виталий
      Комментариев: 267

      Почему не даем?
      У нас условие, если куки пустые, показать окно через 4 секунды, иначе не показывать.
      $("#bg_popup").show();}, 4000) разве это не команда на показ окна?

  • Андрей
    Комментариев: 1

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

    • Виталий
      Комментариев: 267

      Ну так добавьте вашей ссылке ID например id="linkcookie". Потом в скрипте в 3 строке замените setCookie на linkcookie и у Вас получится
      $("#linkcookie").click(function () {
      В итоге при нажатии на ссылку будет совершен переход + запись в куки и окно не появится. Вот и все 🙂

  • Стас
    Комментариев: 1

    Здравствуйте, скажите, как вызывать cookie после того как пользователь находится на сайте более 3-х минут? При этом не важно на какой именно странице и обновлял ли он браузер. Спасибо

  • Андрей
    Комментариев: 3

    Доброго времени суток! А возможно ли реализовать хранение куки не в часах, днях и минутах, а в сессии, то есть куки живет только одну сессию, при закрытии окна куки затираются, а при новом заходе на сайт, окно снова выскакивало? Спасибо!

  • Андрей
    Комментариев: 3

    Если я правильно понимаю, нужно сделать как то так?
    $.cookie("popup" );

    • Виталий
      Комментариев: 267

      Вам нужно просто удалить любое упоминание времени и тогда будет до конца сессии. Верхняя часть кода будет выглядеть так:

      $(document).ready(function(){
      $("#setCookie").click(function () {
      $.cookie("popup", "", {expires: 0} );
      $("#bg_popup").hide();
      });

  • Андрей
    Комментариев: 3

    Спасибо, все работает!

  • николай
    Комментариев: 2

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

    • Виталий
      Комментариев: 267

      Перепроверьте все еще раз и очень внимательно. Скорее всего где-то допустили ошибку. Так же, возможно, окно уже записало куки и так как оно показывается 1 раз в сутки, больше и не появляется.

      • николай
        Комментариев: 2

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

        • Виталий
          Комментариев: 267

          Еще момент. Проверять нужно только на хостинге. Запуская, например, с рабочего стола, то есть локально - работать не будет.

  • Алекс
    Комментариев: 1

    Приветствую! Необходимо при заходе на сайт нового посетителя (в идеале раз в сутки) открывать логотип на весь экран (адаптивно, рисунок болооого размера имеется), и закрывать при клике в любой точке экране. Не подскажете код? Спасибо.

  • Виталий
    Комментариев: 267

    Сделать это возможно, сложного ничего нет, но так сразу не подскажу ибо нужно сесть и написать. Готового кода у меня нет. Причем нужно переделать попросту материал с этой статьи и все.

  • o6opmot
    Комментариев: 2

    что то не совсем понятно как переделать чтоб по времени было а не на сутки

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

    • Виталий
      Комментариев: 267

      Да. 4 строку меняйте на этот код только указывайте нужное время и все. В статье же написано что
      - 60 * 1000 - это одна минута, 60 * 3000 - это три минуты, ну и так далее.

      • o6opmot
        Комментариев: 2

        я поменял , эту строчку $.cookie("popup", "24house", {expires: 0} );

        на это var date = new Date();
        date.setTime(date.getTime() + (60 * 1000));
        $.cookie("popup", "", {expires: date} );
        и ничего не происходит , Вы можете показать пример ?

        • Виталий
          Комментариев: 267

          Ну. Теперь Ваши куки записало на 1 минуту. Через минуту они станут недействительны и при перезагрузке окно вновь появится.

  • Борис
    Комментариев: 1

    Виталий, огромное Вам спасибо за этот чудесный сайт! Все статьи с примерами действительно рабочие, что является большой редкостью в наше время. В свое время в интернете перелопатил море сайтов в поисках подобных Вашему, чтобы все было расписано понятным языком для новичка и при этом работало - Ваш сайт уникален!), все разжевано и в рот юзеру положено. Я в восторге! :))) Спасибо огромное еще раз!

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий