確認ダイアログ

広告

ここではユーザーに対して確認事項を表示し、確認を行うための確認ダイアログの表示方法を見ていきます。 

戻り値 = window.confirm("表示する文字列")

引数で指定した文字列を表示するダイアログを表示します。ダイアログには"OK"ボタンと"キャンセル"ボタンもあわせて表示されます。"window."は省略可能で単に"confirm("文字列")のような記述が可能です。

"OK"ボタンが押された場合は戻り値に"true"が、"キャンセル"ボタンが押された場合は戻り値に"false"が値として返ってきます。また、どちらかのボタンが押されるまではJavaScriptの処理は"confirm"を処理したところで止まります。

サンプルコード

一度試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>

<script type="text/javascript" src="./js/script2_1.js">
</script>

</head>
<body>

<p>
下記のボタンを押して下さい。
</p>

<form name="test">
<input type="button" value="Googleへ移動" onClick="kakunin()">
</form>

</body>
</html>

function kakunin(){
  ret = confirm("Googleへ移動します。よろしいですか？");
  if (ret == true){
    location.href = "http://www.google.co.jp/";
  }
}

上記をブラウザで見ると下記のように表示されます。

p2-1

画面にボタンが1つ表示されます。このボタンをクリックすると下記のように「OK」ボタンと「キャンセル」ボタンの2つのボタンが付いたk確認ダイアログが表示されます。

p2-2

ダイアログの「キャンセル」ボタンを押すとダイアログが閉じるだけですが、「OK」ボタンを押すと下記のようにGoogleへ移動します。

p2-3

( Written by Tatsuo Ikura )