dialog 要素ダイアログを表す

dialog 要素は閲覧者が操作することが可能なダイアログを表します。

open 属性が指定された dialog 要素は初期状態で表示され、閲覧者が操作可能です。open 属性が指定されていない dialog 要素はレンダリングされません。open 属性は論理属性です。

対応するブラウザでは、ボタンを押すと dialog 要素によってダイアログが表示されます。

ダイアログが表示されました!

dialog 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈
  • フロー・コンテンツが期待される場所
この要素で使用できる属性

詳細説明

ダイアログの操作

HTML Standard 仕様書には dialog 要素によるダイアログを操作するための特別なメソッドが定義されています。

dialog.show([anchor])
dialog 要素を表示します。引数はこの要素を固定する位置です。
dialog.showModal([anchor])
dialog 要素を最上位の重ね順で表示し、さらにオートフォーカスします。引数はこの要素を固定する位置です。
dialog.close([result])
dialog 要素を閉じます。引数は戻り値です。
dialog.returnValue [= result]
dialog の戻り値を返します。値をセットすることもできます。

dialog 要素のサンプルソース

<dialog id="dialog">
 <p>ダイアログが表示されました!</p>
 <button type="button" onclick="document.getElementById('dialog').close();">ダイアログを閉じる</button>
</dialog>
 
<button type="button" onclick="document.getElementById('dialog').show();">
 ボタンを押すとダイアログを表示
</button>
<!-- open 属性を付与すれば最初から表示されます -->
<dialog id="dialog" open>
 <p>ダイアログが表示されました!</p>
 <button type="button" onclick="document.getElementById('dialog').close();">ダイアログを閉じる</button>
</dialog>

主要ブラウザの対応

IE11 ×
Edge(EdgeHTML) ×
Edge(Chromium)
Chrome
Firefox
Safari ×
iOS Safari ×
Android Chrome

仕様書の該当箇所

4.11.4 The dialog element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ