jQuery

jQueryを使った確認アラート表示

管理ページなどで情報を削除する際など、確認のアラートボックスを表示したい時があると思います。
これはjQueryを使うと簡単に実装することができます。

» デモページ

<!DOCTYPE html>
<html>
  <head>
  	<title>【デモ】jQueryを使った確認アラート表示</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  </head>
  <body>
	  <p><a class="confirm" href="./del.php">データを削除</a></p>
	  <p style="color:#aaa;">※デモなのでリンク先ページが開くだけです</p>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
		$(".confirm").on('click', function(){
			if(window.confirm("データを削除しますがよろしいですか？")) {
				location.href = $(this).attr('href');
			} else {
				return false;
			}
		});
      });
    </script>
  </body>
</html>

解説

11行目でjQueryを読み込んでいます。今回はGoogleのCDNを使いました。

12行目から22行目がアラートボックス表示に関する部分です。
クリックイベントに対して定義してます。
クラスを指定することで複数のリンクがあった場合にも対応できるので便利です。
「データを削除しますがよろしいですか？」というメッセージを表示し、OKであればリンク先のページを開き、キャンセルであれば何もしないという指示を書いてます。

用途によってはフォームの送信前に最終確認メッセージを表示するなどいろいろな使い方ができると思います。

ちょっとした部分ですが、ユーザビリティをアップしヒューマンエラーを減らす効果があると思います。
目立つ部分ではないですがこんな気遣いがクオリティアップの一つになるので大切にしたいものですね。