window.confirm

（Web API ＞ Window）
https://developer.mozilla.org/ja/docs/Web/API/Window/confirm

confirm(message)

ウェブページ上に確認ダイアログボックスを表示させるのに活躍するメソッド。確認ダイアログとは、ユーザーに確認を要求するために、一時的に表れる小さなウィンドウの事である。
confirmメソッドを使用することで、ユーザの選択によって処理を振り分ける事が出来るのでとても便利である。

「confirm()」の引数にはダイアログに表示したいテキスト文字を記述するが、「変数」を使うことも可能である。どちらかと言えば、実際のプログラミングでは変数を利用したテキスト文字を指定するのが一般的と言える。

var name = '太郎';
window.confirm( name + 'さん、この内容で宜しいですか？');

テキストの改行はエスケープシーケンスの「n」で表現する。

window.confirm('項目1n項目2n項目3');

ボタンやリンクを使う

通常はボタンやリンクをクリックした際にダイアログを表示するのが一般的である。
リンクの場合は、クリックすると画面遷移する前にダイアログが表示されるようになる。

<body>
<button id="btn">ボタン</button> <!-- ボタンの場合 -->
<a id="btn" href="https://www.google.co.jp/">サンプルリンク</a> <!-- リンクの場合 -->

<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    window.confirm('クリックされました！');
})
</script>
</body>

confirmの戻り値で条件分岐

confirmメソッドは、「OK」「キャンセル」をクリックした時に、戻り値として「true / false」を返す。

  • 「OK」ボタンをクリックした　→　trueが返される
  • 「キャンセル」ボタンをクリックした　→　falseが返される
<body>
<button id="btn">ボタン</button>

<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    var result = window.confirm('ボタンをクリック！');
    if( result ) {
        console.log('OKがクリックされました');
    }
    else {
        console.log('キャンセルがクリックされました');
    }
})
</script>
</body>

「submit」の確認ダイアログを作る

一般的に、送信ボタンをクリックすると即座にフォームの内容がサーバーへ送信される。そのため、確認ダイアログを表示して本当に送信しても良いかをユーザーに尋ねる目的がある。

<body>
<form name="myform">
    <input type="text" value="名前">
    <input name="btn" type="submit" value="送信">
</form>

<script>
document.myform.btn.addEventListener('click', function() {
    var result = window.confirm('送信しても宜しいですか？');
    if( result ) {
        //「true」の処理
    }
    else {
        //「false」の処理
    }
})
</script>
</body>

フォーム要素の「name属性」を利用して「document.myform.btn」と記述することでボタン要素を取得している。このボタン要素を使ってイベント処理を実装することで、フォームの内容を送信する前にダイアログを表示できる。

ダイアログをカスタマイズする

一般的にconfirmを使ったダイアログは、開発者がカスタマイズできないように設計されている。そのため、ボタンの表記を変更したり追加するようなこともできない。
その場合は、自作でダイアログを作成する。「HTML / CSS」でダイアログを作成し、JavaScriptで「表示 / 非表示」を制御する。

<div id="dialog">
    <p>ボタンをクリックしてください</p>
    <button id="yes">はい</button>
    <button id="no">いいえ</button>
    <button id="cancel">キャンセル</button>
</div>

<button id="btn">ボタン</button>
#dialog {
    width: 250px;
    margin: auto;
    margin-top: 40vh;
    padding: 30px 20px;
    display: none;
    text-align: center;
    border: 1px solid #aaa;
    box-shadow: 2px 2px 4px #888;
}

「display: none」に設定しておくことで最初は「非表示」の状態にしておくのがポイント。
そして、JavaScriptから「表示 / 非表示」を制御できるようにする。

//各種ボタン要素を取得しておく
var dialog = document.getElementById('dialog');
var btn = document.getElementById('btn');
var yes = document.getElementById('yes');
var no = document.getElementById('no');
var cancel = document.getElementById('cancel');

//ボタンがクリックされたらダイアログを表示する
btn.addEventListener('click', function() {
    dialog.style.display = 'block';
    this.style.display = 'none';
})

//「はい」がクリックされたら
yes.addEventListener('click', function(){ console.log('yes') });
//「いいえ」がクリックされたら
no.addEventListener('click', function(){ console.log('no') });
//「キャンセル」がクリックされたら
cancel.addEventListener('click', function(){ console.log('cancel') });
inserted by FC2 system