HTML Tag Reference

dialog 要素

ダイアログを表す

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

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

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

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

なお、dialog 要素においては、tabindex 属性(グローバル属性)を使用してはいけません。

また、dialog 要素は、ダイアログボックス(ユーザーに情報を提示し、必要に応じて応答してもらうための特殊ウィンドウの一種)を表示するためのものです。ポップアップするからといって、コンテキストメニューやツールチップを dialog 要素で実装することは望ましくありません。その場合は、popover 属性を使用するのが妥当でしょう。

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

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

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