<dialog>タグの解説
<dialog>は、任意のタイミングで開くダイアログボックスを作成します。これはユーザーに示すアラート、インスペクター、モーダルウィンドウのような対話的なコンポーネントとして機能します。
<dialog>タグの特徴
- この要素はJavaScriptを使って呼び出します。初期値ではレイアウトに影響を与えません。
- ダイアログを表示する場合、HTMLDialogElementオブジェクトのshowModalメソッドを呼び出します。ダイアログを閉じる場合はcloseメソッドを使います。
<form>のmethod属性にdialogを指定した場合、ダイアログを閉じる操作が行えます。この時、HTTPリクエストは発生しません。- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<dialog>要素に指定できる属性
open- ダイアログが操作可能な状態であることを表します。この属性が指定されていない時は、ダイアログをユーザーに表示すべきではありません。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<dialog>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。ダイアログは対話的なコンポーネントであるため、これ単体では機能しません。
<dialog>
<p>Comment</p>
<button type="button">Close</button>
</dialog>
JavaScriptのClickイベントを使って、HTMLDialogElementオブジェクトのshowModalメソッドを呼び出します。
<button type="button" onclick="document.getElementById('dialog_ex1').showModal()">ダイアログを表示</button>
<dialog id="dialog_ex1" aria-labelledby="dialog_ex1_h">
<h3 id="dialog_ex1_h">ダイアログの見出し</h3>
<p>ダイアログの内容。</p>
<button type="button" onclick="this.closest('dialog').close();">閉じる</button>
</dialog>