ウィンドウ出口のモーダルポップアップ

ブラウザウィンドウの終了時にモーダルポップアップを作成する方法を理解しようとしています。私はアラートボックスを行う方法を知っていますが、基本的な "あなたは本当に残しておきますか"という警告ボックスの代わりに、ユーザーが終了時にアンケートに回答するようにしたいと考えています。ウィンドウ出口のモーダルポップアップ

出典

2012-02-14 THEDert

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

これは、ブラウザがこの1のような確認ボックスを表示するようになります。

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

あなたが見ることができるように、関数によって返された文字列が表示されています箱の中。

出典

2012-02-14 17:14:07

"このページに留まる"と "このページを残す"テキストを編集する方法はありますか？ – THEDert

いいえ、私はそうは思わない。 –

ああ、それは吸う....あなたのソリューションをありがとう！ – THEDert

できません。ウィンドウを閉じるのを止める唯一の方法は、JS Confirm（またはalert）を使用することです。ページ内のモーダルをポップアップするだけだった場合でも、ウィンドウは閉じたままになり、表示されませんでした。あなたの最善の策は、JSアラートを開いて、そのページを質問にリダイレクトすることです。それはユーザーにとって信じられないほど迷惑であることに注意してください。

出典

2012-02-14 17:07:52

アラートボックスを使用して、休暇をとるよう依頼しなければならない場合は、モーダルをポップアップすることができますか？ – THEDert

もし彼らが出発すると、彼らはなくなってしまったので、それはありません。 – MetalFrog

文書の 'unload'イベントにバインドする必要があります。 – bfavaretto

それは常に終了時にコードを置くことをお勧めしませんが、あなたはこのような何か行うことができます。そして、

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

または

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

：

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

しかし、一般的にonUnloadイベントへのバインドを避けることは良い方法です。その理由は、そのfiすべてのブラウザと状況で、リングが信頼できるものではありません。

UPDATE

としてドキュメントには、それを示しています。すべてのStackOverflowのページ上のFirefox/Firebugのコンソールを介して、それを適用するときにこれが私の作品

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

。ここ

ドキュメント：http://api.jquery.com/unload/

出典

2012-02-14 17:10:24 shanabus

私はそれがうまくいくとは思わない。 onunloadにpreventDefaultがあるかどうかに関わらず、ウィンドウは閉じられますか？ –

これは単純に機能しません。現代のブラウザでは、それをさせません。 – wdev

あなたが正しいです、私はよりよい解決策をアップデートして、それを使用しないことを警告するセクションを強調表示しました。これは一般にアンロードにバインドするのが良いアイデアではありません。 – shanabus

私は、デフォルトのjsメッセージの代わりに素敵なHTMLメッセージを使いたいと思っていました。私はついにそれをやる方法を見つけた。私は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は絶対座標を与えます。非常に重要！

出典

2014-09-24 19:53:49 user704988

ウィンドウ出口のモーダルポップアップ

答えて

関連する問題