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

| 07.07.2014 | 31 комментарий

Сегодня мы сделаем всплывающее окно, которое будет появляться при каждой новой сессии вашего посетителя. Сессия пользователя обновляется при вкл/выкл браузера клиента.
Итак нам понадобится плагин 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();
        });
    }

Выводы

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

(8 голосов. Рейтинг: 4,88 из 5)
Загрузка...

Метки: , , ,

Рубрика: jQuery

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

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

  1. Олег:
    29.08.2014 в 20:53

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

    Ответить
    • WebCo:
      29.08.2014 в 23:11

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

      Ответить
  2. lutskboy:
    19.09.2014 в 14:32

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

    Ответить
    • WebCo:
      19.09.2014 в 15:02

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

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

      Ответить
  3. Олег:
    26.09.2014 в 09:39

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

    Ответить
    • WebCo:
      26.09.2014 в 11:56

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

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

      Ответить
  4. Nikolay:
    21.11.2014 в 18:38

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

    Ответить
    • Дмитрий Британ:
      21.11.2014 в 19:22

      Здравствуйте, Николай!
      Для этого нам нужно немного дополнить функцию 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:
        20.05.2016 в 10:16

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

        Ответить
        • Дмитрий Британ:
          20.05.2016 в 10:24

          Добрый день 🙂
          Архив по ссылке “Исходники” не работает?

          Ответить
          • lionart:
            20.05.2016 в 10:38

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

  5. Дмитрий:
    27.11.2014 в 20:13

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

    Ответить
    • Дмитрий Британ:
      27.11.2014 в 22:49

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

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

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

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

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

      Ответить
      • Таня:
        30.01.2015 в 18:06

        Спасибо за ваши комментарии с кодом реализации, Дима!) Реализовала на своем сайте вывод всплывающего окно через 30 секунд для пользователей, которые впервые на сайте (с проверкой куков). Вот только не разобралась, как сделать так, чтоб окно всплывало через указанное количество секунд пребывания на всем сайте (то есть пользователь за это время может переходить на другие страницы), а не просто на одной странице сайта, как показано в этом вашем примере – //jsfiddle.net/qqobt0gt/4/.

        Ответить
  6. Дмитрий:
    28.11.2014 в 00:51

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

    Ответить
  7. Роман:
    23.01.2015 в 03:29

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

    Ответить
  8. Настя:
    20.02.2015 в 13:10

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

    Ответить
  9. Pavel:
    06.03.2015 в 14:26

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

    Ответить
  10. Дмитрий:
    20.04.2015 в 11:31

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

    Что еще?

    Ответить
  11. Павел:
    27.05.2015 в 11:37

    Добрый день.

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

    Ответить
  12. Алексей:
    17.11.2017 в 19:01

    Приветствую Вас!
    Подскажите пожалуйста как можно сделать так чтобы окно показывалось до тех пор пока его не закроют (использовал ваш сценарий #close)

    Ответить
    • Дмитрий Британ:
      17.11.2017 в 21:10

      Здравствуйте!
      Не понял вопроса, уточните, что в текущем примере нужно поменять? 🙂

      Ответить
  13. Emin:
    20.12.2018 в 13:09

    Все работает , но как убрать ошибку того что pop up не полностью поднимается? При большом количестве текста торчит сверху часть pop up

    Ответить

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

«
»