“dialog”要素:ダイアログボックス

要素について

“dialog”要素はアプリケーション内で一時的に表示され、ユーザーが何らかの操作を行うためのダイアログボックスを表します。ダイアログボックスはユーザーによる操作、もしくは自動的に閉じられます。

“ダイアログボックス”は一般的に何かを入力させたりメッセージを確認させるために一時的に表示されるポップアップのことを言います。コンテキストメニューやツールチップ、ポップアップリストボックスなどはダイアログボックスではないので、“dialog”要素を使用することは望ましくありません。

ダイアログボックスが開かれたときにはユーザーが最初に操作することが想定される要素にフォーカスが当たっていることが望まれます。通常は自動的にフォーカスが当たる子孫要素が選ばれますが、正しい要素にフォーカスが当たるように“dialog”要素内にある該当の要素に“autofocus”属性を指定することが推奨されます。

ダイアログボックスはスクリプトの“showModal()”メソッド、もしくは“open()”メソッドで開くことができます。これらのメソッドは文書の最上位のレイヤーに“dialog”要素を追加することでダイアログボックスを表示します。

“showModal()”メソッドで開かれる場合はダイアログボックスはモーダルウィンドウとして開かれ、ダイアログボックスが開かれている場合はその外側の領域を操作することができなくなります。

スクリプトの“close()”メソッドはダイアログボックスを閉じます。また、“dialog”要素の中に配置され、“method="dialog"”属性が指定された“form”要素は送信ボタンがクリックされた時にダイアログを閉じることができます。

“dialog”要素はダイアログボックスは表示されるとブラウザにより“open”属性が付加され、閉じられると“open”属性が取り除かれます。

“tabindex”属性は“dialog”要素には指定されるべきではありません。

サンプルコード

“show()”メソッドで開く

<p><button type="button" id="dialogopen">開く</button></p>
<p><output id="result"></output></p>

<dialog id="sampledialog">

<form method="dialog" id="agreement">

<p>

猫は可愛い。

</p>
<p>

<button type="submit" value="同意しない">同意しない</button>
<button type="submit" value="同意する" autofocus>同意する</button>

</p>

</form>

</dialog>

<script>

var dialogopen = document.getElementById('dialogopen');
var sampledialog = document.getElementById('sampledialog');
var outputBox = document.getElementById('result');
var selected = document.getElementById('agreement');

dialogopen.addEventListener('click', function onOpen() {

if (typeof sampledialog.show === "function") {

sampledialog.show();

} else {

alert("Error");

}

});

sampledialog.addEventListener('close', function onClose() {

outputBox.value = sampledialog.returnValue + "を選択しました。";

});

</script>

表示サンプルはリンク先を参照

“showModal()”メソッドで開く

<p><button type="button" id="dialogopen">開く</button></p>
<p><output id="result"></output></p>

<dialog id="sampledialog">

<form method="dialog" id="agreement">

<p>

猫は尊い。

</p>
<p>

<button type="submit" value="同意しない">同意しない</button>
<button type="submit" value="同意する" autofocus>同意する</button>

</p>

</form>

</dialog>

<script>

var dialogopen = document.getElementById('dialogopen');
var sampledialog = document.getElementById('sampledialog');
var outputBox = document.getElementById('result');
var selected = document.getElementById('agreement');

dialogopen.addEventListener('click', function onOpen() {

if (typeof sampledialog.showModal === "function") {

sampledialog.showModal();

} else {

alert("Error");

}

});

sampledialog.addEventListener('close', function onClose() {

outputBox.value = sampledialog.returnValue + "を選択しました。";

});

</script>

表示サンプルはリンク先を参照

属性と値

仕様書

“dialog”要素はHTML5.2から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書

<dialog>

open=""