ブラウザ上で入力または編集中に閉じるボタンを誤って押して入力中のページが閉じて入力したものが消えてしまうという経験をした方は多いのではないでしょうか。ここでは、Wordpressで閉じるボタンをクリックしたら確認メッセージを表示させて、OKの場合にページを閉じる方法を紹介します。
この方法は、閉じるボタンではなく他へのリンクをクリックした場合には確認メッセージは表示されません。その場合も表示させたい時は、🔗 ブラウザでページ移動前に確認メッセージを表示の方が良いです。
カスタムHTMLを追加
ブロックを追加で、カスタムHTMLを選択すると、下の画面になるので、HTMLを編集をクリックします。
HTMLコードに以下を記述します。
「閉じる」と表示されたボタンを表示させ、ボタンがクリックされたらdisp()関数を呼び出します。
< input type="button" value="閉じる" onclick="disp()">JavaScriptコードに以下を記述します。
disp()関数本体です。「Windowを閉じても宜しいですか？」と表示された確認ダイアログを表示します。ダイアログで「はい」が選択されたらresultに「true」が、「いいえ」が選択されたら「false」が入ります。「はい」が選択された時にWindowを閉じます。
function disp()
{
var result = window.confirm('Windowを閉じても宜しいですか？');
if( result ) {
//「true」の処理
window.close();
}
else {
//「false」の処理
}
}
