このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

dialog要素:ダイアログボックスHTML5.2で追加

記事Sep. 27th, 2020
ダイアログボックスを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

dialog”要素はアプリケーションの一部として使用されるダイアログボックスを表します。

ダイアログボックスの開閉はスクリプトで行う必要があります。ただし、“dialog”要素の中に配置され、method”属性の値に“dialog”が指定されたform”要素は送信ボタンがクリックされた時にダイアログを閉じます。

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

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

サンプルコード

<p><button type="button" id="dialogopen">選択する</button></p>
<p><output id="result"></output></p>

<dialog id="sampledialog">
<form method="dialog">
<p>
<label>
好きな魚:
<select id="fish" required>
<option value="">--選択--</option>
<option value="鮪">鮪</option>
<option value="鰹">鰹</option>
<option value="鮭">鮭</option>
<option value="鯵">鯵</option>
<option value="鮫">鮫</option>
</select>
</label>
</p>
<p>
<button type="submit" value="キャンセル" formnovalidate>キャンセル</button>
<button type="submit" value="" id="confirm">確定</button>
</p>
</form>
</dialog>

<script>
var dialogopen = document.getElementById('dialogopen');
var sampledialog = document.getElementById('sampledialog');
var outputBox = document.getElementById('result');
var selected = document.getElementById('fish');
var confirm = document.getElementById('confirm');
dialogopen.addEventListener('click', function onOpen() {
if (typeof sampledialog.showModal === "function") {
sampledialog.showModal();
} else {
alert("Error");
}
});
selected.addEventListener('change', function onSelect(e) {
confirm.value = selected.value;
});
sampledialog.addEventListener('close', function onClose() {
outputBox.value = sampledialog.returnValue + "を選択しました。";
});
</script>

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
open="" ダイアログボックスを開いた状態にする open ダイアログボックスを開いた状態にする

仕様書

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

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<dialog>
定義なし

定義なし

定義なし

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク