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 | ○+15.4 |
| iOS Safari | ○+15.4 |
| Android Chrome | ○ |