Уже уходите?
А у нас еще много всякого интересного!!!
+
Работает данный способ просто: Как только мышка вылезла вверх к адресной строке, вкладкам и кнопке закрытия страницы – открывается модальное окно.
Пример можно поглядеть на этой странице.
Скрипт сделан таким образом, что на одной странице окно появится только 1 раз (при обновлении страницы или на любой другой, где он подключен, окно появится снова).
Установка:
|
1 2 3 4 5 6 7 |
<div class="exitblock"> <div class="fon"></div> <div class="modaltext"> Текст, который по вашему мнению должен увидеть посетитель перед уходом. </div> <div class="closeblock">+</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.exitblock { display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:100000; } .exitblock .fon { background: #F6FCFF; opacity:.8; position:fixed; width:100%; height:100%; } .exitblock .modaltext { box-sizing: border-box; padding:20px 40px; border: 2px solid #AEAEAE; background: #F6FCFF; position:fixed; top:80px; left:50%; margin-left:-30%; width:60%; box-shadow: 0 4px 10px 2px rgba(0,0,0,0.5); } .closeblock { cursor:pointer; position: fixed; line-height:60px; font-size:82px; transform: rotate(45deg); text-align:center; top:20px; right:30px; color: #337AB7; } .closeblock:hover { color: #000; } |
|
1 2 3 4 5 6 7 8 9 10 |
$(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(); } }); |
Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie.
В этом случае JS нужно поставить такой:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// функция возвращает cookie с именем name, если есть, если нет, то undefined function getCookie(name) { var matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } // проверяем, есть ли у нас cookie, с которой мы не показываем окно и если нет, запускаем показ var alertwin = getCookie("alertwin"); if (alertwin != "no") { $(document).mouseleave(function(e){ if (e.clientY < 10) { $(".exitblock").fadeIn("fast"); // записываем cookie на 1 день, с которой мы не показываем окно var date = new Date; date.setDate(date.getDate() + 1); document.cookie = "alertwin=no; path=/; expires=" + date.toUTCString(); } }); $(document).click(function(e) { if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) { $(".exitblock").remove(); } }); } |
Еще один вариант, в котором мы не показываем всплывающее окно, если посетитель провел на сайте определенное время.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
function getCookie(name) { var matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } function writeCookie() { // функция записывает cookie на 1 день, с которой мы не показываем окно var date = new Date; date.setDate(date.getDate() + 1); document.cookie = "alertwin=no; path=/; expires=" + date.toUTCString(); } // проверяем, есть ли у нас cookie, с которой мы не показываем окно и если нет, запускаем показ var alertwin = getCookie("alertwin"); if (alertwin != "no") { window.setTimeout(function() { // запускаем таймер на 15 секунд if ($(".exitblock").is(':hidden')) { // если блок не показывается, то убираем его навсегда $(".exitblock").remove(); } writeCookie(); // Устанавливаем куку через 15 секунд, видел ли или нет посетитель всплывающее окно }, 15000); $(document).mouseleave(function(e){ if (e.clientY < 0) { $(".exitblock").fadeIn("fast"); writeCookie(); // Устанавливаем куку когда посетитель увидел окно, даже если не прошло 15 секунд } }); $(document).click(function(e) { if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) { $(".exitblock").remove(); } }); } |
Не забудьте, что на сайте должна быть подключена библиотека jQuery.
Можно использовать localStorage вместо куки
Все работает, но скрипт не удобный, так как начинает срабатывать когда курсор в положении над браузерной строкой или над закладками. А нужно, что бы он работал непосредственно над строкой закладок. Можно как то координаты курсора вверх сместить на срабатывание в пределах 1 см от верхнего края браузера к примеру?
Работает!)) а вот с моб версией не понял!
Добрый день!
Работает супер, подтянул свой попап, все открывается и это самое главное))
Спасибо за помощь!
Но, подскажите пожалуйста, почему-то второй вариант не правильно работает, сделал все, как у Вас записано, но попап открывается когда обновляю страницу или перехожу со страницы на другую страницу, ждал 15 - 30 секунд, но он все равно появляется, можно ли как-то сделать так, чтобы после 30 секунд попап не появлялся со всем, даже если пользователь захотел выйти со страницы?
А можно еще добавить чтобы на мобильниках показывалось через 30 секунд? То есть на дестопах при закрытие страницы, а на мобильниках через 30 секунд. Спасибо
$(document).mouseleave(function(e){ if (e.clientY < 0) { // Этот код } });Добавляем ниже
isMobile = navigator.userAgent.match(/(iPhone|iPod|Android|BlackBerry|iPad|IEMobile|Opera Mini)/); if (isMobile) { setTimeout(function () { // Копируем сюда }, 30000); }Можно пожалуйста подробнее, не совсем понятно как реализовать всплывающее окна на моб. устройствах
Всплывающее окно можно сделать только по таймеру, т.к. на мобилке нет мышки.
Посмотрите еще тут варианты: Модальное окно по таймеру
Чево?
Короче если навести на выпадающий список инпута в Chrome и если этот список будет очень большим, что вылезет из окна браузера, то тогда сработает триггер mouseleave. Не нашел пока способа решить эту проблему изящно.
Приветствую, а можете подсказать, как добавить событие, чтобы если человек например 10 секунд пробыл на странице, тоже всплывало это окно? И если оно открылось по времени, то при наведении его уже не было.
В последнем варианте темы заменяем первый:
$(".exitblock").remove(); на $(".exitblock").fadeIn("fast");
И соотв. 15 секунд на 10
Наверное немного неправильно выразился. Я хочу, чтобы это окно вылазило в таких вариациях:
1. Если наводим на строку выхода как сейчас.
2. Если человек провел на странице допустим 5 секунд, но не навёл на выход, а оно само вылезло.
Если срабатывает 2й вариант, то тогда желательно 1й уже не показывать.
А да, извиняюсь, работает. Спасибо!
Подскажите есть ли возможность использовать этот код без библиотеки 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 на готовое всплывающее окно?
Тут так просто не скажешь...
Если у вас полностью свое модальное окно, тут надо не modaltext менять, а вообще все по сути.
При уходе курсора открывать его, а при закрытии удалять и добавлять при необходимости куки.
А если у вас просто оно нарисованное, то вставить в этот самый modaltext и все.
Ребят приветствую. А как по поводу конверсии? Никто не смотрел, не анализировал?
Меня просили ставить на пару сайтов, но потом просили убрать.
Спасибо за инфу
Все круто работает)) спасибо))
Приветствую, спасибо за скрипт, подскажите, в чем проблема. Я использую 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, но все равно окно показывается не один раз. Как правильно сделать?
Если я правильно понял, то кука работает, но потом (при перезагрузке или другой странице).
Так и должно быть, страница же загрузилась и условие на ее чтение уже сыграло (когда ее не было).
Удалите окно через remove() и оно не появится вторично на странице.
А дальше соотв. будет работать условие куки.
Спасибо большое
подскажите где сделать шрифт больше?
Шрифт это font-size
Где именно? если меняю в font-size крестик меняет размер, сам шрифт остается такого же размера.
Тут нет оформления самого окна.
Оно же уникальное для всех случаев.
Используйте любое для класса modaltext
Доброго дня!
..у меня что-то пошло не так, окно наверху показывается (вывела модулем с позицией в шапке) и js-код (его написалав админке в шаблоне в окошке "Before </head>")..
Вот сайт http://grand.rntk-test2.ru
У вас JS код написан как HTML
Он должен быть в тегах script
О! Спасибо огромное, только при наведении на закрытие вкладки все равно ничего не происходит...
Попробуйте в скрипте изменить $ на jQuery
Или напишите в ВК мне, чтобы быстрее было 🙂
jQuery сработало - спасибо большое пребольшое!!!
Здравствуйте.
А подскажите, пожалуйста, что дописать в css чтобы у окна были не прямые углы, а закругленные?
Добавить к
.exitblock .modaltext { border-radius: 15px; }Добрый вечер!
Спасибо за скрипт.
Судя по всему - немного не разобрался: нужно было добавить код метрики - для подсчета по цели "показ модального окна".
Добавил сюда:
$(".exitblock").fadeIn("fast"); yaCounter0000000.reachGoal('show_modal'); writeCookie();Потестил - вроде работает, но вот уже сутки наблюдаю: есть пользователи, у которых по метрике и визит и 2-3 достижения цели...
Я ошибся с местом вызова ReachGoal?
Заранее спасибо!
В данной конструкции цель будет срабатывать всегда, когда курсор уходит к шапке браузера. Может и 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 (
Кэш, естественно, чистый, как и куки
А куки вообще пишутся?
Я точно не помню, но тоже что то долго с ними воевал.
Пишутся, ибо при проверке на сервере - показывается 1 раз в сутки (до очистки кук)...
Так если показываются раз в день.... Все же работает, нет?
Александр! Спасибо огромное, работает.
Правда, с особенностями: если модальное окно скрыто выход за body - цель не срабатывает. Так и надо.
Если модальное окно открыто выход за body (первый выход за body). Цель срабатывает. Так и надо
Если модальное окно открыто несколько выходов за body (туда-сюда мышкой возякать). Цель срабатывает. Так не надо, но не критично )))
Из предыдущего сообщения удалились знаки Плюс, поэтому выглядит как будто писал идиот )))
В общем, работает всё, кроме того что, если при открытом модальном окне выйти N раз за body, то столько раз цель и будет выполнена.
Пеоеменную можно поставить, для разового выполнения:
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 на сайте не нашел, поэтому направил свою скромную благодарность на указанный телефонный номер. Любой труд должен быть если не оплачен, то вознагражден.
Спасибо!
И Вам спасибо!
Обращайтесь, если что 🙂
Спасибо за скрипт сейчас попробую на своем сайте https://oberi.ru
Добрый день!
Подскажите, пожалуйста, только начинаю работать в веб-разработке и появилась задача реализации выпадающего окна, когда пользователь хочет выйти из сайта.
Подходит Ваш второй вариант скрипта, но , к сожалению, не получается его корректно применить, возможно, что-то не так делаю..(дополнительно к проекту подключаю jquery-3.4.1)
Не совсем понятна фраза "Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie."
это значит, что необходимо дополнительно подключить jquery-cookie?
Буду очень признательна за ответ!
jquery-cookie подключать не надо.
А что не получается, ошибки какие нибудь появляются?
Может из-за кук как раз и не показывается окно вам, т.к. записывается кука, с которой окно не появляется.
Хорошее решение, автору спасибо. Вариант с куки вообще супер, очень частая проблема что многие примеры модалок и других призывов, которые требуют куки, как правило идут без них, процветания .....
Благодарю!
На первом примере можете сделать if при выxоде "или" после 60 секунд наxождения на сайте? Я проста жаваскрипт не знаю.
setTimeout("document.getElementById('exitblock').style.display='block'", 60000);
добавлять после кода и добавить id на элемент. тогда появится окно через 60 сек.
Добрый день. Спасибо за Ваше решение, будем его использовать у себя на сайте.
Я прошу прощения, но мне не совсем понятно с всплывающей формой на сайте через 60 секунд. Вроде сделал как Вы написали а ничего не работает. Можете поподробнее рассказать ка реализовать данную функцию?
Спасибо, уже сам разобрался.
Пробовал устанавливать по-очереди все три варианта скрипта, но что-то у меня не пошло. После установки на сайт модальное окно изначально видно и никоим образом не убирается. Мне нужен второй вариант. Я в JS не силён и потому понять в чём причина мне сложно. Браузер Яндекс. В других пока не пробовал. Буду признателен, если подскажите. Устанавливал вроде всё правильно. Стили после библиотеки, скрипт после стилей ( перед </head> ), сам код окна перед </body>.
А можно ссылку на ваш сайт?
Так сложно догадаться что именно не так.
Блок, он изначально не должен показываться на странице, т.е. стоит стиль:
Здравствуйте. Использую последний вариант скрипта. Модалка выводится при каждом выходе указателя из границ <body>, по моим наблюдениям, в течении всего срока таймера на 15 секунд.
Клиент зашел на сайт, прошло 5сек, он захотел уйти, ведет указатель вверх - вылазит окно, он его закрывает, опять хочет уйти - опять вылезает. Это раздражает.
Использую код без этой части, ибо я вызываю модальное окно, которое уже было добавлено на сайт и у него есть кнопка закрытия окна. Или для чего нужен этот код?
$(document).click(function(e) { if (($(".exitblock").is(':visible'))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" мне хочется задать вопрос: вы следите за мной что ли?
Это еще цветочки 🙂
Яндекс Метрика, например, при включенном вебвизоре, еще записывает видео, как вы по сайту мышкой водите и что нажимаете. Ну и другой статистики много 🙂
Было здорово увидеть пример с танцующим пингвином. А как это скажется на скорости загрузки сайта?
Вы просто молодец. не останавливайтесь на достигнутом.
Спасибо 🙂
А что касается скорости загрузки, это все маленький скрипт, а пингвина, который весит 516,15 КБ ставить вовсе не обязательно, обычно там ставят формы или какую нибудь информацию про скидки или акции.
Здравствуйте. Подскажите куда в вордпресс вставить блок с html? Есть у темы файл index.php Если вставить до "<div class="content-wrapper"><main class="content">", не выводит вообще никак и нигде. Если после, то окно сразу видно на страницах. Или это отдельный файл, но не вижу в вашем коде чтобы был прописан путь к нему.
Странно как то.
HTML можно вставлять где угодно.
Если не выводит никак и нигде - это проблема с JS скорее всего, он должен выводится после подключения библиотеки jQuery
А если показывается везде, то это проблема с CSS, так как для блока стоит display:none;
PS: может быть вы не подключили CSS и JS? Они во вкладках, рядом с HTML
В InternetExplorer и Edge не работает. Как исправить?
Подправил код под осла 🙂
Для мобильных это все не работает, к сожалению, а знаете ли Вы как это можно реализовать на мобильных устройствах?
Я уже писал, что на мобильных нет мышки.
Как вы себе представляете это?
Скрипт очень интересный и лёгкий, не надо подключать модальные плагины джейкуверти.
Однако по сей день ведутся споры о данном окне, ведь оно может быть не к месту, если, к примеру, пользователь не уходит, а хочет переключиться на другую вкладку.
В этой связи я подумал, а что если добавить возможное появление данного окна ТОЛЬКО в первые 15 секунд и на первой посещённой странице сайта. Ведь если пользователь будет на сайте дольше (или перейдя на другую страницу сайта), то априори он уже заинтересован - тут сохраняется идеальный баланс между отсутствием раздражения и хорошими поведенческими. А для тех, кто хочет уйти раньше 15 секунд - показывать форму поиска в модальном окне, предложив тем самым найти интересующую информацию и удержать посетителя, что улучшим поведенческие.
Сделайте, пожалуйста, данную возможность в вашем замечательном скрипте 🙂
Можно как то так.
Используем второй вариант скрипта и добавляем таймаут, который спрячет этот блок.
window.setTimeout(function() { $(".exitblock").remove(); }, 15000);И записываем куку, с которой окно вообще не показывается (только после того, где идет ее проверка):
Ее можно записать отдельно - в этом случае человек зашел и только на этой странице он может увидеть окно и то, если не прошло 15 секунд.
Или записать в таймаут, тогда окно выскочит где то 1 раз, если на 1 странице посетитель не провел 15 секунд
Не совсем понял что и куда вставлять. Я сделал так https://jsfiddle.net/ctgoqb72/ , но выведенное сообщение скрывается исходя из 15 секунд, т.е. если мышку вывели за границы окна браузера через 10 секунд, то модальное окно покажется лишь на 5 секунд и исчезнет.
И про куку тоже не совсем понял. По логике, кука должна писаться через 15 секунд после захода на первую страницу. Т.е. пользователь зашёл на первую страничку, провёл там 30 секунд, перешёл на вторую и провёл там, к примеру, 5 секунд. И несмотря на то, что он провёл на второй странице 5 секунд, модальное окно ему уже не должно показываться, т.к. он уже формально со стороны поисковой системы считается "заинтересованным посетителем".
Да, да, это я ошибся 🙁
Добавил код в статью, попробуйте
Благодарствую 🙂 Отличный код 🙂
И если не затруднит, может есть возможность добавить коротенький звуковой сигнал при срабатывании модального окна 🙂
На мой взгляд это дополнительно акцентирует внимание и в тоже время не является навязчивым 🙂
В HTML:
В JS, там где показываем окно
$(".exitblock").fadeIn("fast");Добавляем ниже или выше:
$('.alert').trigger('play'); window.setTimeout(function() { $(".alert").remove(); }, 1000); // Удалим его через секунду, чтобы больше не пелоИ там где не показываем окно, а просто удаляем, тоже:
$(".alert").remove();как сделать открытие окна по клику на крестик закрывающий вкладку?
Не совсем понял как это, закрывающий крестик закрывает, а не открывает окно.
А если это какой то другой крестик, то так:
$(".class-krestika").click(function() {$(".exitblock").show();
});
не работает
Где?
Не работает на маке.
В каком браузере?
В хроме и сафари все отлично работает.
Спасибо, пригодилось.
как сделать закрытие окна по клику на кнопку а не на область в не окна
https://codepen.io/atuin/post/1
Конструктор Date разве не должен быть со скобками?
Здравствуйте. В статье вы говорите, что скрипт на одной странице появится только 1 раз. Подскажите, как вы это реализовали? Я сделал то же самое по вашей инструкции, но у меня скрипт срабатывает каждый раз, когда курсор выходит из области документа.
Он будет появляться снова при обновлении страницы и соотв. на любой другой, если там подключен.
Чтобы вообще больше не появлялся на сайте, а только один раз, нужно использовать куки.
Сейчас добавлю код для этого случая.
А как сделать такое,чтобы на мобильном работало? не нашёл решений
Данный принцип работает не на закрытии окна или браузера, а на выход мышки за пределы.
На мобильном палец не определяется над какой частью страницы он водится 🙂
Есть скрипты, которые предупреждают об уходе со страницы (переход по ссылке, закрытие окна или браузера). На мобильном не проверял правда их работу.
Но там текст пишет сам браузер, например: Эта страница просит вас подтвердить, что вы хотите уйти — при этом введённые вами данные могут не сохраниться.
Изменить там что то не получится,
Я что то не пойму, а как работает крестик, который закрывает окно?
Он никак не работает 🙂 Для красоты просто 🙂
А закрытие окна происходит при клике вне окна.