Кейс №7. Ненавязчивое уведомление перед закрытием страницы

Составляем уведомление

Уведомление будет выводиться с помощью подключенной библиотеки fancybox. Это уведомление мы поместим в нижнюю часть шаблона, скроем и укажем для него id, чтобы в любой момент его найти и показать:

<div style="display:none" id="closing-message">
...Текст сообщения...
</div>

В тексте сообщения можно предложить:

• Промо-код для гостя на странице оформления заказа. Он может быть многоразовым, но не говорите об этом. Сообщите, что этот промо-код действует только здесь и сейчас в течении часа
• Оставить email (зарегистрироваться), чтобы получить какой-либо бонус (подарок)
• Подписаться на рассылку, чтобы не потерять контакт. Это может быть форма сервиса email рассылок или ссылка на страницу подписки, где вы подробно описываете выгоды подписчиков
• Следить в социальных сетях за вашим сайтом
• Ответить на вопрос "Что не получается?", "Нужна помощь?", связаться с консультантом, заказать обратный звонок и т.д.

Уверен, это далеко не все варианты и вы придумаете нужный для своего случая.

Выводим уведомление

Теперь пришло время вывести уведомление. Для этого нам понадобится написать небольшой скрипт.

В предложенном варианте уведомление будет показываться, когда курсор мыши покидает контент страницы и появляется в области расположения вкладок браузера (к сожалению, это относится и к полосе прокрутки):

$("body").on("mouseleave",function(){
 $.fancybox("#closing-message");
});

Чтобы посмотреть, как это работает, наведите курсор на кнопку, а затем на другую область:

Демонстрация на кнопке

Когда вам потребуется реализовать что-то подобное при наведении на кнопку или контейнер, просто укажите класс или идентификатор в скрипте:

$("#button-id").on("mouseleave",function(){
 $.fancybox("#closing-message");
});

Важно то, что при этом не блокируется закрытие вкладка как в случае с alert сообщениями, поэтому уведомление в заметке названо ненавязчивым.

На этом все.

Дополнения

В первом случае невозможна реализация ненавязчивого уведомления, поскольку при закрытии вкладки пользователь ожидает, что она закроется. Пришлось бы прерывать событие и показывать alert окно. Лично меня подобное жутко бесит (кроме случаев, когда сайт предлагает сохранить изменения).

Чтобы запомнить тех, кто уже видел уведомление, допишем код:

if(!getCookie("closing-message")) {
 $("html").bind("mouseleave",function closingMessage(){
 $.fancybox("#closing-message");
 document.cookie = "closing-message=true;path=/";
 $("html").unbind("mouseleave", closingMessage);
 });
}
function getCookie(name) {
 var matches = document.cookie.match(new RegExp(
 "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
 ))
 return matches ? decodeURIComponent(matches[1]) : undefined 
} 

Теперь напишем код таймера, который закроет уведомлении после 7 секунд:

setTimeout(function(){$.fancybox.close()}, 7*1000);

Добавим этот код в обработчик события и в итоге получим:

if(!getCookie("closing-message")) {
 $("html").bind("mouseleave",function closingMessage(){
 $.fancybox("#closing-message");
 document.cookie = "closing-message=true;path=/";
 $("html").unbind("mouseleave", closingMessage);
 setTimeout(function(){$.fancybox.close()}, 7*1000);
 });
}
function getCookie(name) {
 var matches = document.cookie.match(new RegExp(
 "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
 ))
 return matches ? decodeURIComponent(matches[1]) : undefined 
}