<dialog>
<dialog> 要素はモーダルまたは非モーダルのダイアログボックスを表します。showModal() メソッドでモーダル表示できます。
概要
<dialog> 要素はモーダルまたは非モーダルのダイアログボックスを表します。showModal() メソッドでモーダル表示できます。
対応ブラウザ
デスクトップ
Chrome 37+
Edge 79+
Safari 15.4+
Firefox 98+
モバイル
Chrome Android 37+
Safari iOS 15.4+
Firefox Android 98+
基本構文
HTML
<dialog id="myDialog">
<h2>確認</h2>
<p>この操作を実行しますか？</p>
<form method="dialog">
<button value="cancel">キャンセル</button>
<button value="ok">OK</button>
</form>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">ダイアログを開く</button>実務での使いどころ
-
<dialog> の活用
ダイアログボックスを表す要素。モーダルや確認プロンプトに使用。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。