Всплывающее окно при закрытии страницы

В данной заметке приведен пример скрипта на jQuery, который откроет модальное окно при попытке посетителя покинуть страницу.

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

Уже уходите?

А у нас еще много всякого интересного!!!

+

Работает данный способ просто: Как только мышка вылезла вверх к адресной строке, вкладкам и кнопке закрытия страницы – открывается модальное окно.

Пример можно поглядеть на этой странице.

Скрипт сделан таким образом, что на одной странице окно появится только 1 раз (при обновлении страницы или на любой другой, где он подключен, окно появится снова).

Установка:

Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie.

В этом случае JS нужно поставить такой:

Еще один вариант, в котором мы не показываем всплывающее окно, если посетитель провел на сайте определенное время.

Не забудьте, что на сайте должна быть подключена библиотека jQuery.

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Юрий:

    Подскажите есть ли возможность использовать этот код без библиотеки JQuery, возможно кто-то сможет подсказать как перевести его на чистый JAvaScript. Я к сожалению не могу использовать JQuery в своем проекте((
    $(document).mouseleave(function(e){
    if (e.clientY < 10) {
    $(".exitblock").fadeIn("fast");
    }
    });
    $(document).click(function(e) {
    if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
    $(".exitblock").remove();
    }
    });

    Ответить
    • Тот же Юрий:

      https://dev.to/deammer/building-an-exit-popup-with-javascript-120c

      Ответить
  • Анастасия:

    Спасибо, все работает! Вопрос — как поменять modaltext на готовое всплывающее окно?

    Ответить
    • Alexander:

      Тут так просто не скажешь…
      Если у вас полностью свое модальное окно, тут надо не modaltext менять, а вообще все по сути.
      При уходе курсора открывать его, а при закрытии удалять и добавлять при необходимости куки.

      А если у вас просто оно нарисованное, то вставить в этот самый modaltext и все.

      Ответить
  • Рушан:

    Ребят приветствую. А как по поводу конверсии? Никто не смотрел, не анализировал?

    Ответить
    • Евгений:

      Меня просили ставить на пару сайтов, но потом просили убрать.

      Ответить
  • ILya:

    Все круто работает)) спасибо))

    Ответить
  • Григорий:

    Приветствую, спасибо за скрипт, подскажите, в чем проблема. Я использую jQuery.cookie, функция у меня такая
    if (!jQuery.cookie('hideModa')) {
    jQuery(document).mouseleave(function(e){
    if (e.clientY < 0) {
    jQuery('#popup-banner').modal();
    jQuery.cookie('hideModa', true, {
    expires: 1,
    path: '/'
    });
    }
    });
    }

    то есть вызывается модальное окно.
    Но оно открывается каждый раз, когда убирается мышь пока не обновишь страницу. Кука пишется, после вызова окна она становится true, но все равно окно показывается не один раз. Как правильно сделать?

    Ответить
    • Alexander:

      Если я правильно понял, то кука работает, но потом (при перезагрузке или другой странице).
      Так и должно быть, страница же загрузилась и условие на ее чтение уже сыграло (когда ее не было).

      Удалите окно через remove() и оно не появится вторично на странице.
      А дальше соотв. будет работать условие куки.

      Ответить
      • Григорий:

        Спасибо большое

        Ответить
  • Евгений:

    подскажите где сделать шрифт больше?

    Ответить
      • Евгений:

        Где именно? если меняю в font-size крестик меняет размер, сам шрифт остается такого же размера.

        Ответить
        • Alexander:

          Тут нет оформления самого окна.
          Оно же уникальное для всех случаев.
          Используйте любое для класса modaltext

          Ответить
  • Юлия:

    Доброго дня!
    ..у меня что-то пошло не так, окно наверху показывается (вывела модулем с позицией в шапке) и js-код (его написалав админке в шаблоне в окошке "Before </head>")..
    Вот сайт http://grand.rntk-test2.ru

    Ответить
    • Alexander:

      У вас JS код написан как HTML
      Он должен быть в тегах script

      Ответить
      • Юлия:

        О! Спасибо огромное, только при наведении на закрытие вкладки все равно ничего не происходит…

        Ответить
        • Alexander:

          Попробуйте в скрипте изменить $ на jQuery
          Или напишите в ВК мне, чтобы быстрее было 🙂

          Ответить
          • Юлия:

            jQuery сработало — спасибо большое пребольшое!!!

            Ответить
  • Евгений:

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

    Ответить
    • Alexander:

      Добавить к

      .exitblock .modaltext {
        border-radius: 15px;
      }
      Ответить
  • Виталий:

    Добрый вечер!
    Спасибо за скрипт.
    Судя по всему — немного не разобрался: нужно было добавить код метрики — для подсчета по цели "показ модального окна".
    Добавил сюда:

                $(".exitblock").fadeIn("fast");      
    			yaCounter0000000.reachGoal('show_modal');
                writeCookie(); 
    

    Потестил — вроде работает, но вот уже сутки наблюдаю: есть пользователи, у которых по метрике и визит и 2-3 достижения цели…

    Я ошибся с местом вызова ReachGoal?

    Заранее спасибо!

    Ответить
    • Alexander:

      В данной конструкции цель будет срабатывать всегда, когда курсор уходит к шапке браузера. Может и 20 раз на 1 посетителе. Т.е. окно не показывается, а цель сработает.

      Поставьте так цель в тоже место:

      if ($(".exitblock").is(":visible")) {
      	yaCounter0000000.reachGoal('show_modal');
      	console.log("Цель сработала");	//для проверки
      }
      Ответить
      • Виталий:
        // Устанавливаем куку через 20 секунд, видел ли или нет посетитель всплывающее окно
            }, 20000);        
            $(document).mouseleave(function(e){
                if (e.clientY < 0) {
                    $(".exitblock").fadeIn("fast");    
        			if ($(".exitblock").is(":visible")) {
        				yaCounter4000000.reachGoal('show_modal');
        				console.log("Цель сработала");	//для проверки
        			}					
                    writeCookie(); 
        // Устанавливаем куку когда посетитель увидел окно, даже если не прошло 15 секунд
        

        Взял чуть шире отрезок, ибо: на локалке, почему-то всё работает как надо. А вот на сервере — мотает по прежнему на каждый выход из body (

        Ответить
        • Виталий:

          Кэш, естественно, чистый, как и куки

          Ответить
        • Alexander:

          А куки вообще пишутся?
          Я точно не помню, но тоже что то долго с ними воевал.

          Ответить
          • Виталий:

            Пишутся, ибо при проверке на сервере — показывается 1 раз в сутки (до очистки кук)…

            Ответить
            • Alexander:

              Так если показываются раз в день…. Все же работает, нет?

              Ответить
              • Виталий:

                Александр! Спасибо огромное, работает.

                Правда, с особенностями: если модальное окно скрыто выход за body — цель не срабатывает. Так и надо.
                Если модальное окно открыто выход за body (первый выход за body). Цель срабатывает. Так и надо

                Если модальное окно открыто несколько выходов за body (туда-сюда мышкой возякать). Цель срабатывает. Так не надо, но не критично )))

              • Виталий:

                Из предыдущего сообщения удалились знаки Плюс, поэтому выглядит как будто писал идиот )))

                В общем, работает всё, кроме того что, если при открытом модальном окне выйти N раз за body, то столько раз цель и будет выполнена.

              • Alexander:

                Пеоеменную можно поставить, для разового выполнения:

                let raz = false;
                $(document).mouseleave(function(e){
                 if (e.clientY < 0) {
                  $(".exitblock").fadeIn("fast");	
                   if (($(".exitblock").is(':visible')) && (!raz)) {
                    yaCounter0000000.reachGoal('show_modal');	
                    console.log("Цель сработала");	
                    raz = true;
                   }			
                  writeCookie(); 
                 }    
                });
          • Виталий:

            Ответить в ветку уже не могу, видимо ограничение на вложенность комментов.

            Спасибо Вам огромное. Кошеля Яденьги или wm на сайте не нашел, поэтому направил свою скромную благодарность на указанный телефонный номер. Любой труд должен быть если не оплачен, то вознагражден.

            Спасибо!

            Ответить
            • Alexander:

              И Вам спасибо!
              Обращайтесь, если что 🙂

              Ответить
  • Миха:

    Спасибо за скрипт сейчас попробую на своем сайте https://oberi.ru

    Ответить
  • Алина:

    Добрый день!
    Подскажите, пожалуйста, только начинаю работать в веб-разработке и появилась задача реализации выпадающего окна, когда пользователь хочет выйти из сайта.
    Подходит Ваш второй вариант скрипта, но , к сожалению, не получается его корректно применить, возможно, что-то не так делаю..(дополнительно к проекту подключаю jquery-3.4.1)
    Не совсем понятна фраза "Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie."
    это значит, что необходимо дополнительно подключить jquery-cookie?
    Буду очень признательна за ответ!

    Ответить
    • Alexander:

      jquery-cookie подключать не надо.

      А что не получается, ошибки какие нибудь появляются?
      Может из-за кук как раз и не показывается окно вам, т.к. записывается кука, с которой окно не появляется.

      Ответить
  • Рустам:

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

    Ответить
  • Akzhol:

    На первом примере можете сделать if при выxоде "или" после 60 секунд наxождения на сайте? Я проста жаваскрипт не знаю.

    Ответить
    • Akzhol:

      setTimeout("document.getElementById('exitblock').style.display='block'", 60000);
      добавлять после кода и добавить id на элемент. тогда появится окно через 60 сек.

      Ответить
      • Евгений:

        Добрый день. Спасибо за Ваше решение, будем его использовать у себя на сайте.
        Я прошу прощения, но мне не совсем понятно с всплывающей формой на сайте через 60 секунд. Вроде сделал как Вы написали а ничего не работает. Можете поподробнее рассказать ка реализовать данную функцию?

        Ответить
        • Евгений:

          Спасибо, уже сам разобрался.

          Ответить
  • Михаил:

    Пробовал устанавливать по-очереди все три варианта скрипта, но что-то у меня не пошло. После установки на сайт модальное окно изначально видно и никоим образом не убирается. Мне нужен второй вариант. Я в JS не силён и потому понять в чём причина мне сложно. Браузер Яндекс. В других пока не пробовал. Буду признателен, если подскажите. Устанавливал вроде всё правильно. Стили после библиотеки, скрипт после стилей ( перед </head> ), сам код окна перед </body>.

    Ответить
    • Alexander:

      А можно ссылку на ваш сайт?
      Так сложно догадаться что именно не так.
      Блок, он изначально не должен показываться на странице, т.е. стоит стиль:

      display:none;  
      Ответить
  • Иван:

    Здравствуйте. Использую последний вариант скрипта. Модалка выводится при каждом выходе указателя из границ <body>, по моим наблюдениям, в течении всего срока таймера на 15 секунд.
    Клиент зашел на сайт, прошло 5сек, он захотел уйти, ведет указатель вверх — вылазит окно, он его закрывает, опять хочет уйти — опять вылезает. Это раздражает.
    Использую код без этой части, ибо я вызываю модальное окно, которое уже было добавлено на сайт и у него есть кнопка закрытия окна. Или для чего нужен этот код?

    $(document).click(function(e) {
            if (($(".exitblock").is(':visible'))
    Ответить
    • Alexander:
      if (($(".exitblock").is(':visible'))

      Я не делал кнопку закрытия, окно закрывается (точнее даже удаляется) по клику на странице.
      А чтобы оно не удалялось, когда закрытое — этот код.

      У вас, как я понял, вызывается свое окно.
      Пропишите:

      $(".knopka_zakrit").click(function(){
      	$(".exitblock").remove();
      }); 

      Где:
      knopka_zakrit — класс кнопки, которая закрывает ваше модальное окно
      exitblock — класс самого модального окна

      Но и в этом случае если обновить страницу — окно появится. Чтобы не показывалось, тут есть пример с куками.

      Еще один вариант, это вызывать само окно 1 раз, а не удалять его.

      var onse = true;
      $(document).mouseleave(function(e){
      	if ((onse) && (e.clientY < 10)) {	
      		$(".exitblock").fadeIn("fast");
      		onse = false;	
      	}
      });
      
      Ответить
  • Алёша:

    Каждый раз когда я вижу окно, возникающее перед уходом с сайта или типа "Мы заметили, что вы используете AdBlock Plus" мне хочется задать вопрос: вы следите за мной что ли?

    Ответить
    • Alexander:

      Это еще цветочки 🙂
      Яндекс Метрика, например, при включенном вебвизоре, еще записывает видео, как вы по сайту мышкой водите и что нажимаете. Ну и другой статистики много 🙂

      Ответить
  • Федор:

    Было здорово увидеть пример с танцующим пингвином. А как это скажется на скорости загрузки сайта?

    Вы просто молодец. не останавливайтесь на достигнутом.

    Ответить
    • Alexander:

      Спасибо 🙂
      А что касается скорости загрузки, это все маленький скрипт, а пингвина, который весит 516,15 КБ ставить вовсе не обязательно, обычно там ставят формы или какую нибудь информацию про скидки или акции.

      Ответить
  • Виктор:

    Здравствуйте. Подскажите куда в вордпресс вставить блок с html? Есть у темы файл index.php Если вставить до "<div class="content-wrapper"><main class="content">", не выводит вообще никак и нигде. Если после, то окно сразу видно на страницах. Или это отдельный файл, но не вижу в вашем коде чтобы был прописан путь к нему.

    Ответить
    • Alexander:

      Странно как то.
      HTML можно вставлять где угодно.
      Если не выводит никак и нигде — это проблема с JS скорее всего, он должен выводится после подключения библиотеки jQuery
      А если показывается везде, то это проблема с CSS, так как для блока стоит display:none;

      PS: может быть вы не подключили CSS и JS? Они во вкладках, рядом с HTML

      Ответить
  • samdecks:

    В InternetExplorer и Edge не работает. Как исправить?

    Ответить
    • Alexander:

      Подправил код под осла 🙂

      Ответить
  • Андрей:

    Для мобильных это все не работает, к сожалению, а знаете ли Вы как это можно реализовать на мобильных устройствах?

    Ответить
    • Alexander:

      Я уже писал, что на мобильных нет мышки.
      Как вы себе представляете это?

      Ответить
  • Валерий:

    Скрипт очень интересный и лёгкий, не надо подключать модальные плагины джейкуверти.

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

    В этой связи я подумал, а что если добавить возможное появление данного окна ТОЛЬКО в первые 15 секунд и на первой посещённой странице сайта. Ведь если пользователь будет на сайте дольше (или перейдя на другую страницу сайта), то априори он уже заинтересован — тут сохраняется идеальный баланс между отсутствием раздражения и хорошими поведенческими. А для тех, кто хочет уйти раньше 15 секунд — показывать форму поиска в модальном окне, предложив тем самым найти интересующую информацию и удержать посетителя, что улучшим поведенческие.

    Сделайте, пожалуйста, данную возможность в вашем замечательном скрипте 🙂

    Ответить
    • Alexander:

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

      window.setTimeout(function() {
           $(".exitblock").remove();
      }, 15000);

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

      var date = new Date;
      date.setDate(date.getDate() + 1);   //количество дней 
      document.cookie = "alertwin=no; path=/; expires=" + date.toUTCString();   

      Ее можно записать отдельно — в этом случае человек зашел и только на этой странице он может увидеть окно и то, если не прошло 15 секунд.

      Или записать в таймаут, тогда окно выскочит где то 1 раз, если на 1 странице посетитель не провел 15 секунд

      Ответить
      • Валерий:

        Не совсем понял что и куда вставлять. Я сделал так https://jsfiddle.net/ctgoqb72/ , но выведенное сообщение скрывается исходя из 15 секунд, т.е. если мышку вывели за границы окна браузера через 10 секунд, то модальное окно покажется лишь на 5 секунд и исчезнет.

        И про куку тоже не совсем понял. По логике, кука должна писаться через 15 секунд после захода на первую страницу. Т.е. пользователь зашёл на первую страничку, провёл там 30 секунд, перешёл на вторую и провёл там, к примеру, 5 секунд. И несмотря на то, что он провёл на второй странице 5 секунд, модальное окно ему уже не должно показываться, т.к. он уже формально со стороны поисковой системы считается "заинтересованным посетителем".

        Ответить
        • Alexander:

          Да, да, это я ошибся 🙁
          Добавил код в статью, попробуйте

          Ответить
          • Валерий:

            Благодарствую 🙂 Отличный код 🙂
            И если не затруднит, может есть возможность добавить коротенький звуковой сигнал при срабатывании модального окна 🙂
            На мой взгляд это дополнительно акцентирует внимание и в тоже время не является навязчивым 🙂

            Ответить
            • Alexander:

              В HTML:

              <audio class="alert"><source src="alert.mp3" type="audio/mpeg"></audio>
              

              В JS, там где показываем окно

               $(".exitblock").fadeIn("fast"); 
              

              Добавляем ниже или выше:

              $('.alert').trigger('play');
              window.setTimeout(function() {
              $(".alert").remove();
              }, 1000); // Удалим его через секунду, чтобы больше не пело
              

              И там где не показываем окно, а просто удаляем, тоже:

              $(".alert").remove();
              Ответить
  • kwai:

    как сделать открытие окна по клику на крестик закрывающий вкладку?

    Ответить
    • Alexander:

      Не совсем понял как это, закрывающий крестик закрывает, а не открывает окно.

      А если это какой то другой крестик, то так:
      $(".class-krestika").click(function() {
      $(".exitblock").show();
      });

      Ответить
      • Анатолий:

        Не работает на маке.

        Ответить
        • mm:

          В каком браузере?
          В хроме и сафари все отлично работает.

          Ответить
  • Виталий:

    Спасибо, пригодилось.

    Ответить
  • waak:

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

    Ответить
    • Alexander:

      https://codepen.io/atuin/post/1

      Ответить
  • Павел:

    Конструктор Date разве не должен быть со скобками?

    Ответить
  • Сергей:

    Здравствуйте. В статье вы говорите, что скрипт на одной странице появится только 1 раз. Подскажите, как вы это реализовали? Я сделал то же самое по вашей инструкции, но у меня скрипт срабатывает каждый раз, когда курсор выходит из области документа.

    Ответить
    • Alexander:

      Он будет появляться снова при обновлении страницы и соотв. на любой другой, если там подключен.
      Чтобы вообще больше не появлялся на сайте, а только один раз, нужно использовать куки.
      Сейчас добавлю код для этого случая.

      Ответить
  • Александр:

    А как сделать такое,чтобы на мобильном работало? не нашёл решений

    Ответить
    • Alexander:

      Данный принцип работает не на закрытии окна или браузера, а на выход мышки за пределы.
      На мобильном палец не определяется над какой частью страницы он водится 🙂

      Есть скрипты, которые предупреждают об уходе со страницы (переход по ссылке, закрытие окна или браузера). На мобильном не проверял правда их работу.
      Но там текст пишет сам браузер, например: Эта страница просит вас подтвердить, что вы хотите уйти — при этом введённые вами данные могут не сохраниться.
      Изменить там что то не получится,

      Ответить
  • Светлана:

    Я что то не пойму, а как работает крестик, который закрывает окно?

    Ответить
    • Alexander:

      Он никак не работает 🙂 Для красоты просто 🙂
      А закрытие окна происходит при клике вне окна.

      Ответить