【jQuery】ページ離脱時のポップアップ表示を変更したい

Question

ページ離脱時のポップアップを表示させる際にjQueryのbeforeunloadイベント使用すると思うのですが、ブラウザ独自のウィンドウが表示されると思います。

こちらのウィンドウのデザインを変更することは可能でしょうか？
どのブラウザでも以下のようなデザインで表示させるようにしたいです。

解決方法がございましたらご教示いただけますと幸いです。

Answer 1

どのブラウザでも以下のようなデザインで表示させるようにしたいです。

Webページ内からの操作で他のサイトへ遷移しようとする場合には、JavaScriptでそれを検知した上で、このような表示を出す制御は可能です。

HTMLの枠外の、ブラウザを閉じる、URLバーに別なアドレスを打ち込んで飛ぶ、などをしようとする場合には、onbeforeunloadの定形ダイアログしかできることはありません。

Comments

[Jake5]

ご回答ありがとうございます。
では定型ダイアログを使用せずhtml/css/JSを使用してページ離脱前にポップアップを表示させるにはどのように実装すればよいでしょうか。(添付画像2枚目はどのように実装されているのでしょうか)
初歩的な質問で申し訳ありません。

[maisumakun]

以下の3つの要素を実装すれば可能です。

・外部ページへ飛ぶリンクのクリックを検出する
・リンク遷移を止めてダイアログを描画する
・ダイアログのOKボタンを押した場合は、きちんと遷移を行う

ダイアログの表示ルーチンを初め、かなり大掛かりな作業になるのは間違いありません。

[Jake5]

ライブラリを使うパターンが多いようですね。勉強になりました。

Answer 2

ブラウザ独自のウィンドウが表示されると思います。
こちらのウィンドウのデザインを変更することは可能でしょうか？

ブラウザが出す警告ダイアログを任意のダイアログに置き換え可能なら、セキュリティ上の脆弱性になりえます。
よって、不可能と考えます。

Re: Jake5 さん

Answer 3

beforeunloadはユーザーのページ遷移を一時的とはいえ阻害する作業です
仕様によってはユーザーへの過大な不利益が想定されるためやれることも限られており、
ブラウザの仕様に一任するしかありません