2012-02-14 2 views
0

Попытка выяснить, как сделать модальное всплывающее окно в окне браузера. Я знаю, как сделать окно предупреждения, но я хочу, чтобы пользователи ответили на вопросник при выходе, вместо основного окна «вы уверены, что хотите покинуть».Modal Popup on Window Exit

ответ

1
window.onbeforeunload = function() { 
    return 'Your content has not been properly saved yet!'; 
}; 

Это заставит браузер отобразить окно подтверждения, как этот:

http://f.cl.ly/items/2L0t1k0d2U0p0Z0z1d2t/Screen%20shot%202012-02-14%20at%206.09.58%20PM.png

Как вы можете видеть, строка, возвращаемая функцией отображается в коробке.

+0

Есть ли способ редактировать текст «остаться на этой странице» и «оставить эту страницу»? – THEDert

+0

Нет, я так не думаю. –

+0

А, это отстой .... спасибо за ваше решение !! – THEDert

1

Вы не можете. Единственный способ остановить закрытие окна - использовать JS Confirm (или предупреждение). Если бы вы только что всплыли на модной странице, окно все равно было бы закрыто, и вы никогда его не увидели. Лучше всего открыть оповещение JS, а затем перенаправить страницу на вопрос. Хотя обратите внимание, что это невероятно раздражает пользователя.

+0

Итак, нужно было бы использовать окно оповещения, а затем попросить их оставить отпуск, если они уйдут, может ли он появится модальный? – THEDert

+0

Если они уйдут, они исчезнут, так что нет. – MetalFrog

+1

Вы должны привязываться к событию 'unload' документа. – bfavaretto

1

Хотя это не всегда рекомендуется ставить код на выходе, вы могли бы сделать что-то вроде этого:

<body onUnload="javascript:openDialog()"> 

или

$(document).bind('unload', openDialog); 

Тогда:

function openDialog(e) { 
    e.preventDefault(); 
    $("#yourQuestionnaire").dialog('open'); 
} 

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

UPDATE

документация показывает, как:

$(window).unload(function() { 
    alert('Handler for .unload() called.'); 
}); 

Это работает для меня при применении его с помощью консоли Firefox/Firebug на любой странице StackOverflow.

Документация здесь: http://api.jquery.com/unload/

+1

Я не думаю, что это сработает. Окно по-прежнему будет закрыто, есть ли предупреждение onDunault onunload, не так ли? –

+0

Это просто не работает. Любой современный браузер не позволит вам это сделать. – wdev

+0

Вы правы, я обновил лучшее решение и высветил раздел, предупреждающий об использовании его, поскольку обычно не рекомендуется связывать его с выгрузкой (как было сказано ранее). – shanabus

1

У меня были схожие требования, когда я хотел использовать приятное сообщение 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 дает абсолютную координату. Очень важно!