ポップアップアラートのかんたん実装
「単純なアラート」「OK/NGのみの二択アラート」「ページ離脱時の警告」の三本立て。
ブラウザ依存なのでデザインもクソもない代わりにめちゃくちゃ簡単実装。
アラートを表示
ただメッセージを出すだけのやつ。
alert("エラーメッセージ");
サンプル:これを押すと出ます。
二択で答えさせる
「ログアウトしますか?」とか「削除してよろしいですか?」みたいなやつですね。
if (confirm("質問:どちらか押してください")){ alert("OKでした"); } else{ alert("NGでした"); }
サンプル:これを押すと出ます。
ページ離脱時に警告を出す
あのウザいやつ。意外と実装は簡単でした。
ただ、↓のように指定したメッセージってあんまり表示されないような…。
FirefoxとChromeではブラウザ固有のメッセージだったので、似たような意味合いのものを一応入れておくか…くらいでよいかも。
window.addEventListener("beforeunload", function(e){ e.returnValue = "ページを閉じていいですか?"; }, false);
サンプルとしてこのページに仕込んであります…が、それだとウザいので、
↓のボタンを押してから離脱しようとすると警告が出るようにしてあります。
※ブラウザによっては動作しないかも?
また、フォーム送信時など、必要ないときにも出てしまったりするので、
そういうときはイベントを解除してやる必要があります。
// イベントの内容を変数に入れておく var stopExitEvent = function(e){ e.returnValue = "ページを閉じていいですか?"; } // イベント設定 window.addEventListener("beforeunload", stopExitEvent, false); // 解除したい場面で呼んでやる function releaseStopExitEvent(){ window.removeEventListener("beforeunload", stopExitEvent, false); }
さっきのボタンを押しちゃった場合でも、こっちを押してから遷移すると警告は出ません。
jQueryならこんな感じ。
var stopExitEvent = function(e){ return "ページを閉じていいですか?"; } $(window).on("beforeunload", stopExitEvent); function releaseStopExitEvent(){ $(window).off("beforeunload", stopExitEvent); }