Очень важно чтобы в процессе оформления заказа в интернет-магазине посетитель случайно не закрыл страницу или не перешел на другую страницу. Существует JS-скрипт, который может предотвратить эти нежелательные действия.
Например, он используется на Яндекс.Маркете. Смысл его работы заключается в том, что при попытке закрыть окно или вкладку браузера, появляется стандартное всплывающее окно с 2 кнопками «закрыть окно» и «остаться на странице».
Правда в нем есть небольшой недостаток, он срабатывает не только на закрытие вкладки в окне браузера, но и при клике по ссылкам на странице, а также при отправке формы.
Обычно процесс оформления заказа происходит в несколько шагов, поэтому подтверждение своих действий на каждом шаге оформления заказа неуместно.
Благо, что существует усовершенствованный JS-скрипт, который срабатывает только на закрытие вкладок или окна. Его код я и приведу в этой заметке.
JavaScript
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(){o.resetUnload});
$(document).on('submit', 'form', function(){o.resetUnload});
$(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 – «запускает» работу перечисленных методов после загрузки страницы.
Вот, собственно, и весь скрипт. Чтобы посмотреть, как он работает остается только подключить его к страницам сайта или зайти на демо-страничку.
Так как всплывающие окна являются стандартными окнами браузера, изменить их каким-либо образом невозможно.
Во всех браузерах надписи на кнопках разные, возможности заменить текст надписей не существует.
Кроме того, стандартные модальные окна нельзя позиционировать относительно окна браузера.
