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

Нужен САЙТ? Заказуй у меня - Жми сюда! Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

Сегодня мы сделаем всплывающее окно, которое будет появляться при каждой новой сессии вашего посетителя. Сессия пользователя обновляется при вкл/выкл браузера клиента.
Итак нам понадобится плагин jQuery Cookie, который мы рассмотрели в прошлом посте, вот ссылка - откроется в новой вкладке.
Так же мы будем использовать вывод всплывающего окна, который сделали в посте - Делаем всплывающее окно.

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

1. Мы будем проверять, был ли пользователь у нас на сайте. Если он впервые - то покажем окно, если нет - не покажем :)
2. Чтобы понять был пользователь на сайте или нет, мы создадим куки - visit и при первом же заходе посетителя будем присваивать ему значение true.
Вот и вся не замысловатая затея.

Реализация

1. Скачайте архив примера Всплывающего окна, ссылка.
2. Скачиваем скрипт плагина jQuery Cookie, ссылка.
3. Добавляем в index.html путь к файлу плагина jQuery Cookie

<script type="text/javascript" src="js/jquery.cookie.js"></script>

4. Все что нужно нам поменять в скаченном вами архиве - это файл скрипта. Вот полный код файла скрипта (пояснение к нему после самого кода)

$(document).ready(function(){
    var pp     = $("#pp"),
        bg     = $("#pp-bg");

    function pp_hide(pp, bg){
        pp.animate({top: "-550px"}, 1000, function(){bg.fadeOut(1000);});
    }

    function pp_show(pp, bg){
        pp.animate({top: "150px"}, 2000);
        bg.fadeIn(1000).click(function(){pp_hide(pp, bg)});
    }

    if ( $.cookie('visit') == undefined ){
        $.cookie('visit', true);
        pp_show(pp, bg);
    } else {
        $('body').append('<h1>Вы у нас уже были :)</h1><a href="#" id="remove_cookie">Удалить куки!</a>');
        $('#remove_cookie').click(function(e){
            e.preventDefault();
            $.removeCookie('visit');
            $(this).after("<span>Куки удалены успешно! Перезагрузите страницу :)</span>").remove();
        });
    }
});

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

if ( $.cookie('visit') == undefined ){

Если пользователю не было присвоено куки, то его значение будет undefined.

Далее, если пользователь впервые зашел на сайт в текущей сессии его браузера, то мы присваиваем ему куки visit со значением true и выводим наше всплывающее окно

$.cookie('visit', true);
pp_show(pp, bg);

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

 else {
        $('body').append('<h1>Вы у нас уже были :)</h1><a href="#" id="remove_cookie">Удалить куки!</a>');
        $('#remove_cookie').click(function(e){
            e.preventDefault();
            $.removeCookie('visit');
            $(this).after("<span>Куки удалены успешно! Перезагрузите страницу :)</span>").remove();
        });
    }

Выводы

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

Нужен САЙТ? Заказуй у меня - Жми сюда! Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

Делясь ссылкой на пост в социальных сетях - Вы помогаете развитию блога! Спасибо ;)

(6 голосов. Рейтинг: 5,00 из 5)
Loading...Loading...

Метки: , , ,

Рубрика: jQuery

Комментарии (28)

| RSS комментария

  1. Олег:

    Здравствуйте!
    Не подскажете как поставить вывод куки в зависимость от времени установки другой куки? Мне нужно вывести следующее окно через определённый промежуток времени после установки предыдущей куки. К примеру, записать в значение текущую дату, а следующую вывести не ранее чем через день.
    Спасибо!

    • WebCo:

      Здравствуйте, Олег!
      Вот набросал для вас пример, в котором в первое куки записываю дату входа пользователя и при каждом новом заходе сравниваю дату текущего захода с датой первого, если они равны вывожу сообщение, если нет, то там вы пишите свой код :)
      Даты сравниваю в таком формате dd/mm/yyyy. Вот ссылка на пример.
      Если остались вопросы — пишите, постараюсь ответить :)

  2. lutskboy:

    Скажите пожалуйста как сделать чтоб окно автоматически закрылось через скажем 10 секунд.

    • WebCo:

      Для этого можно использовать метод jQuery — delay(). Метод delay делает паузу перед следующей командой в цепочке jQuery. В качестве параметра мы ему можем задать время паузы в миллисекундах, например 5 сек. будет выглядеть таким образом: delay(5000).

      Для вашей задачи я написал код, который будет скрывать окно через 5 сек. — вот ссылка Скрываем всплывающее окно через 5 секунд.
      Если у вас остались вопросы, пишите! С радостью помогу или отвечу новым постом ;)

  3. Олег:

    WebCo, здравствуйте!
    Гляньте, пожалуйста:
    instantcms.com.ua/blogs/instantcms-perevagi-ta-nedol-ki-sistemi/nagaduvanja-koristuvacham-pro-avatar-v-instantcms-2.html
    (надеюсь, вам украинский знаком). Код рабочий — уже проверено. Может желательно там что-нибудь подправить?
    Заранее благодарен!

    • WebCo:

      >> Код рабочий — уже проверено.
      >> Может желательно там что-нибудь подправить?

      Что поправить и что мне смотреть? ))

  4. Nikolay:

    Здравствуйте. А подскожите пожалуйста как сделать сворачивание модульного окна не только по нажатию по фону, но и по нажатию на ссылку «закрыть»?

    • Дмитрий Британ:

      Здравствуйте, Николай!
      Для этого нам нужно немного дополнить функцию pp_show(pp, bg) в которой мы инициализируем функцию «сворачивание» всплывающего окна.

      function pp_show(pp, bg){
              pp.animate({top: "150px"}, 2000);
              bg.fadeIn(1000);
              
              /* 
                 Пусть кнопка закрыть будет с id="close" 
                 тогда мы добавим ее в список селекторов выборки с помощью метода add()           
              */
              bg.add('#close').click(function(event){
                  event.preventDefault();
                  pp_hide(pp, bg);
              });
      }
      

      Если остались вопросы, пишите, постараюсь ответить :)

      • lionart:

        Добрый день, если не сложно выложите рабочий код и html и модифицированный script.js с кнопкой закрытия, тот код что выше с id=close почему то не срабатывает

        • Дмитрий Британ:

          Добрый день :)
          Архив по ссылке «Исходники» не работает?

          • lionart:

            у вас сам popup, который (в исходниках) всплывает первым он без кнопки закрытия, закрывается по клику за пределами popup-а

  5. Дмитрий:

    Здравствуйте Дмитрий!
    Возможно ли реализовать такое:
    показывать модальное окно через N секунд и только тем, кто был на сайтах site1.ru, site2.ru, site3.ru ?
    Я так понимаю. что для этого надо добавить код на эти сайты, чтобы браузер подхватил куки.
    Или возможно и без добавления?
    Спасибо.

    • Дмитрий Британ:

      Здравствуйте, Дмитрий :)
      Сделать вывод всплывающего она через N секунд возможно — вот ссылка на пример.
      А вот проверить был ли пользователь на другом сайте или взять куки другого домена, тут я думаю ничего не получится.

      Кроссдоменное использование куки — невозможно, это прямой риск личным данным.

      Но возможно проверить, если пользователь пришел с указанного сайта на ваш ресурс:

      jQuery(document).ready(function($) {
        var referrer =  document.referrer;
        if (referrer == 'http://domain.tld/') {
          // Make whatever you like  
        }
      });
      

      Вот как-то так, надеюсь чем-то помог Вам.
      Если остались вопросы пишите!

  6. Дмитрий:

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

  7. Роман:

    Спасибо большое, очень пригодилось! :)

  8. Настя:

    Вообще то что нужно! Именно это искала. Спасибо!!!

  9. Pavel:

    Дима, добрый день!
    Замечательная работа, спасибо огромное!
    Подскажите, пожалуйста, вот мы делаем так, чтобы окно закрывалось автоматически по истечению определенного времени, скажем через 10 сек. А как вывести в самом окне, чтобы показывалось: «окно автоматически закроется через 10,9,8,7… и т.д.», т.е. обратный отчет?
    Спасибо!

  10. Подскажите, как установить..
    залил файлы
    добавил в header сайта

    Что еще?

  11. Павел:

    Добрый день.

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

Оставьте свой комментарий