Stylize Javascript Exit Popup

Question

Я пытаюсь создать и стилизовать всплывающее окно выхода (границы, фон, шрифт), которое появляется, когда пользователь пытается покинуть страницу. Это пример сценария:

$(window).bind('beforeunload', function(){ 

$(function() { 
    alert("My message"); 
}); 

return ' '; 

}); 

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

This page is asking you to confirm that you want to leave - data you have entered may not be saved. (Leave page/Stay on page) 

Но я знаю, что это невозможно изменить стиль alertbox поэтому я попытался с диалогом JQuery UI():

$(window).bind('beforeunload', function(){ 

$(function() { 
    $("#dialog").dialog(); 
}); 

return ' '; 
}); 

К сожалению, это не работает, как так как диалог не имеет такой же функциональности, как и предупреждение. Диалог появляется одновременно с окном подтверждения.

Как я могу решить эту проблему?

Answer 1

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

window.onbeforeunload = nullAs explained here

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

Answer 2

У меня были схожие требования, когда я хотел использовать приятное сообщение HTML вместо сообщения js по умолчанию. Проведя некоторое время, я наконец нашел способ сделать это. Я использовал jQuery Colorbox, который очень полезен в любых модальных требованиях, а не только здесь.

В основном вы можете использовать событие mousemove и найти, если координата Y (e.clientY) меньше 5. Таким образом, он будет запущен каждый раз, когда мышь находится возле адресной строки (пользователь вводит новый URL-адрес или пытается закрыть окно).

jQuery(document).ready(function() { 
jQuery(document).mousemove(function(e) { 
    if (e.clientY <= 5) { 
     jQuery.colorbox({initialHeight: 250, initialWidth: 250, html:'<h2>any custom HTML here</h2><br/><img src="nice-img" />'}); 
    } 
}); 

});

Я нашел много примеров, используя e.pageY, но учтите, что он будет запущен, только если пользователь не прокрутил вниз. Поэтому, если вы прокрутите вниз даже на 5 пикселей, e.pageY не будет работать, но e.clientY будет работать. e.pageY дает смещение, в то время как e.clientY дает абсолютную координату. Очень важно!