dialog 要素

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

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

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

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

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

ダイアログの操作

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

dialog.show([anchor])

dialog 要素を表示します。引数はこの要素を固定する位置です。

dialog.showModal([anchor])

dialog 要素を最上位の重ね順で表示し、さらにオートフォーカスします。引数はこの要素を固定する位置です。

dialog.close([result])

dialog 要素を閉じます。引数は戻り値です。

dialog.returnValue [= result]

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	○