JS-скрипт для подтверждения закрытия страницы
Очень важно чтобы в процессе оформления заказа в интернет-магазине посетитель случайно не закрыл страницу или не перешел на другую страницу. Существует JS-скрипт, который может предотвратить эти нежелательные действия. Например, он используется на Яндекс.Маркете. Смысл его работы заключается в том, что при попытке закрыть окно или вкладку браузера, появляется стандартное всплывающее окно с 2 кнопками «закрыть окно» и «остаться на странице». Правда в нем есть небольшой недостаток, он срабатывает не только на закрытие вкладки в окне браузера, но и при клике по ссылкам на странице, а также при отправке формы.
Обычно процесс оформления заказа происходит в несколько шагов, поэтому подтверждение своих действий на каждом шаге оформления заказа неуместно.
Благо, что существует усовершенствованный JS-скрипт, который срабатывает только на закрытие вкладок или окна. Его код я и приведу в этой заметке.
function Unloader() < var o = this; this.unload = function(evt) < var message = "Вы уверены, что хотите покинуть страницу оформления заказа?"; if (typeof evt == "undefined") < evt = window.event; >if (evt) < evt.returnValue = message; >return message; > this.resetUnload = function() < $(window).off('beforeunload', o.unload); setTimeout(function()< $(window).on('beforeunload', o.unload); >, 2000); > this.init = function() < $(window).on('beforeunload', o.unload); $('a').on('click', function()); $(document).on('submit', 'form', function()); $(document).on('keydown', function(event) < if((event.ctrlKey && event.keyCode == 116) || event.keyCode == 116)< o.resetUnload; >>); > this.init(); > $(function() < if(typeof window.obUnloader != 'object') < window.obUnloader = new Unloader(); >>)Функция-конструктор Unloader() , содержит в себе несколько «методов»:
- unload – срабатывает при закрытии окна или вкладки и показывает всплывающее окно с вопросом, текст которого хранится в переменой message. Правда, некоторые браузеры заменяют текст сообщения своим.
- resetUnload – предотвращает показ всплывающего окна при клике по ссылкам и отправке форм.
- init – «запускает» работу перечисленных методов после загрузки страницы.
Вот, собственно, и весь скрипт. Чтобы посмотреть, как он работает остается только подключить его к страницам сайта или зайти на демо-страничку.
Так как всплывающие окна являются стандартными окнами браузера, изменить их каким-либо образом невозможно. Во всех браузерах надписи на кнопках разные, возможности заменить текст надписей не существует. Кроме того, стандартные модальные окна нельзя позиционировать относительно окна браузера.
Всплывающее окно при закрытии страницы на CSS
Польза будет производиться при виде конверсии, где есть безусловно минусы, но кому понравится, что будет показываться окно, так как основном или многие решат, что оно будет носить рекламный характер. Где гость, который впервые попал на портал, может сразу выйти и больше на нем не показываться. Так, что если ставить, то лучше разместить на нем яркое изображение, что оно временное и просто вам предлагает остаться на сайте и посмотреть еще материал.
Разговаривая с одни веб мастером, у которого такое окно стоит, только немного дизайн другой. Так ему изначально стали писать, чтоб убрал, а то посещаемости не будет. Но он сделал так, что разместил актуальную и оригинальную информацию, и кто говорил, что пока не уберет, не будет заходить. А нет, вижу его на сайте, так как не крути, а информация намного дороже одного клика.
Приступаем к установке:
Здесь заголовки
Окно, которое будет появляться при закрытие страницы, а также при выходе сайта, вообщем при наведение функций на браузере.
#devicesa-goodidea <
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(132, 126, 126, 0.67);
text-align: center;
z-index: 9999;
>
#devicesa-goodidea::after <
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
content: '';
>
#smallera-backgrou <
padding: 35px 8px 8px;
min-height: 195px;
max-width: 438px;
display: inline-block;
vertical-align: middle;
position: relative;
text-align: center;
background: #354ece;
color: #f0f1eb;
text-shadow: 0 1px 0 #5f5c5c;
border-radius: 3px;
border: 3px solid #f9f1f1;
>
#smallera-backgrou h4 <
margin:0;
text-align:center;
font-size:17px;
>
.mensionis-kexcessiv <
display: block;
position: absolute;
background: #0e2456;
top: 0;
left: 50%;
margin-left: -24px;
line-height: 24px;
font-weight: bold;
width: 53px;
height: 27px;
text-align: center;
color: #f7f3f3;
cursor: pointer;
-webkit-border-bottom-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 75px;
>
.mensionis-kexcessiv:hover <
background: #32f71c;
color: #3a3838;
>
Это модальное окно использует jQuery, где необходимо подключить библиотеку, если она у вас не подключена. Основном ставят вверх сайта сайта или закрывающимся head, а также можно задействовать низ ресурса и прописать перед закрывающимся body.
Здесь нужно изначально понять, что будет работать не по заданной функций, а по такому принципу. Если курсор находится в периметре страницы, то все нормально, только он выходит из нее, это может как в самых вверх подняться или в низ, так появляется окно.
-SAM- 2018-08-19 02:06 1 , ответ пользователю -SAM-
Если разобраться, то на CSS здесь, как и во всех случаях - внешняя составляющая, функции же на JS. вот и не ясно зачем в таких материалах каждый раз акцент делать, что на CSS.
UPD.: тут не вопрос оригинальности названия, а вопрос того чего оно на самом деле ( такое название материала было бы оправдано, если бы всё сделано было посредством CSS и без применения JS. а так слова "на CSS" - именно что для флуда ). Да и сама кнопка закрытия окна - и то не на CSS, а повесили функцию на onclick (думаю, что можно было бы иначе сделать, но цели такой не было, поскольку само внешнее оформление - переделка вот этого). В нашем случае из материала этого можно почерпнуть именно функцию на JS ( кто не знал к чему привязать, чтобы было по выходе с сайта. как пример, я вот чего-то нового узнал, типо как сделать Уведомление при закрытии страницы. если я правильно понял это. а там уж какое оно будет, в виде этого блока или иначе - можно переделать ).
И это бралось с другой площадки, ибо на uCoz подключать еще одну библиотеку jQuery - в ущерб сайту. это для тех написано, кто не в курсе, что на uCoz по умолчанию уже подключена библиотека jQuery системно, а ее версия выбирается непосредственно в ПУ.
UPD. 2: почитал тут - с закрытием страницы это не связано вообще.
Код обработчика события mouseleave выполнится, когда указатель мыши будет выведен за пределы выбранного элемента.
Событие mouseleave часто используется совместно с событием mouseenter.
Изначально может показаться, что обработчик события mouseout делает тоже самое, что и mouseleave, но это не так. Код обработчика события mouseout, в отличие от mouseleave будет также выполнен, когда указатель мыши будет выведен за пределы любого элемента потомка выбранного элемента.
Посему блок будет выводиться каждый раз, когда за границы курсор отвёл просто (что и не собирался уходить со страницы). Вот этот материал - то же, что и тут представлено, выше написал суть (просто разные варианты вывода уведомления идут, функция же одна и та же JS, к которой цепляется). В сети, если пробить "уведомление при закрытии страницы" - есть еще варианты, что более подходящие (написал вам в личку про это - можно опубликовать уже сюда).
P.S.: и да, Kosten, я сразу и сказал выше - не в укор, я в разбор чего оно. это, если учесть факт того, что я сперва этот материал рассмотрел, а потом ранее опубликованный. тут просто с названием вопрос встал каким сделать, чтобы не было дублем ранее выложенного. и так уж вышло, что не совсем удачное название получилось (исходя из содержимого). такие вот дела.
Kosten 2018-08-19 02:12 2 , ответ пользователю Kosten
Надеюсь, что ради интереса, а не в укор. Просто здесь CSS есть, да, что могу в название указать. Второе, про мониторинге не нашел такое название, где безусловно хочется оригинальным сделать. Еще есть небольшие нюансы, но это уже полный флуд получится.
Скрипт всплывающего окна при закрытии страницы
Добрый день. Недавно выкладывал статью о том, как сделать всплывающее окно при первом посещении сайта, но многие просили добавить статью с зеркальным эффектом, чтобы окошко появлялась при уходе посетителя с сайта, то есть при попытке закрыть страницу.
Сегодня и поговорим на эту тему, и я покажу простую реализацию.
Конечно, споры о том, стоит ли добавлять всплывающее окно при закрытии страницы на свой сайт будут вечными. Одни говорят, что для тех, кто добавляет его - уготовлено отдельное место в Аду, что это дико бесит, что если я решил уйти, то я уйду и никакие всплывающие окна меня не остановят, а только будут раздражать. Другие говорят, что такие всплывающие окна повышают конверсию и отлично работают. Я думаю, попробовать стоит, а там, на основе статистики, АА и АБ тестов делать уже конкретные выводы относительной вашей ниши и продукта.
Как сделать всплывающее окно при закрытии страницы
На самом деле, я не стал мудрствовать лукаво и просто немного изменил прошлую статью, добавил несколько строчек javascript кода. Раньше, модальное окно появлялось при первом посещении сайта. Сейчас оно будет показываться только при первом посещении сайта (когда курсор покидает основную область сайта и переходит в район вкладок). Если пользователь еще раз зайдет на сайт, то у него не будет показываться это окно. Реализовано это точно так же, как и в прошлой статье, при помощи cookie. Кука хранится 7 дней, можете указать любое количество на свое усмотрение.
И еще, мы не вешаем событие на клик по крестику во вкладке, а просто проверяем положение курсора. Мы не блокируем окно, кнопки и прочее, ничего не требуем, а просто показываем окошко.
Как и в прошлый раз, будем использовать jQuery плагин arcticModal, а значит подключаем сам jQuery:
Далее подключаем сам плагин, у меня он так и лежит в папке libs, поэтому такой путь:
И подключаем тему плагина, я пользуюсь стандартной, но вы можете написать и свою:
Теперь, чтобы работали наши cookie - добавим плагин cookies от Яндекса:
И подключаем скрипт config.js со следующим содержимым:
$(document).ready(function () < if (!$.cookie('smartCookies')) < $(document).mouseleave(function (e) < function getWindow() < $('.offer').arcticmodal(< closeOnOverlayClick: true, closeOnEsc: true >); >; setTimeout(getWindow, 1); $.cookie('smartCookies', true, < expires: 7, path: '/' >); >); >; >); Если читали прошлую статью, то заметили, что ничего не поменялось, кроме того, что немного видоизменился скрипт в файле config.js. То есть просто появилось еще одно условие, которое срабатывает, когда курсор покидает область сайта, то есть находиться в районе вкладок.
Кстати, в прошлый раз забыл объяснить, что означают эти параметры:
closeOnOverlayClick: true, closeOnEsc: true
- closeOnOverlayClick - позволяет закрыть окно при клике на любую область в не окна.
- closeOnEsc - закрывает окно при нажатии на Escape
Теперь о самой разметке страницы. Не изменилось ровным счетом - ничего.
Можете вставить форму или предложить подписаться на вас в социальных сетях
Немного объясню. modalInner - обертка модального окна, с display:none в стилях. offer - класс самого модального окна. Если будете менять его, то не забудьте поменять класс и в скрипте.
Вот такая простая реализация всплывающего окна при закрытии страницы. А как вы считаете, стоит ли использовать подобный эффект на сайте?
52 комментария
Забыл сказать, что понятное дело, при ctrl+f4 - страница спокойно закроется и пользователь не увидит никакого окна.
к сожалению, адблокер и санкции от гугла очень сильно понижают эфективность этого скрипта.
Автору спасибо за код, но . см. выше
Как реагирует адблокер на js и css? Да и на санкции от гугл не тянет. Показывается только 1 раз, а потом в куках метка, и больше не показывается.
Данный скрипт работает, если пытаемся закрыть страницу, находясь в самом верху страницы, при большом контенте это не работает, поправьте если я ошибаюсь.
"Делать попап - Не делать?" - Зависит от уровня маркетинга на сайте (работы с клиентом) и тучи разных вещей. Можно посмотреть амерские сайты-аналоги (они впереди от 10 лет). Однако.
Exit Popup - посетитель уходит, не совершив ожидаемого действия, а с ним уходит и ваша зарплата, и ваши деньги, что вы потратили на его привлечение. И ВЫ НЕ ХОТИТЕ ЕГО ЗАИНТЕРЕСОВАТЬ, "пущай уходит"? Кто-то из великих амеров-маркетологов заметил:"Меня сделали богатым те, кто сказал мне "нет!" " Полагаете, он - не прав?
И если вы посмотрите на все уже с точки зрения Exit Popup, то. вас может кардинально накрыть правильными открытиями.
Не отрабатывает. Навесил на сайт по инструкции и всё, пустота. Думал, что его давит адблок - нет, в разных браузерах - одно и то же. Сайт вот, например: __http://karmenta.pro/rent/
Ошибки, которые консоль выводит поправьте. А для проверки работоспособности, загрузите исходник - все работает. Перепроверил.