<dialog> 任意のタイミングで開くダイアログボックスを作成する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ セクショニング・ルート |
親にできる要素 | フロー・コンテンツを受け入れる要素 |
子にできる要素 | フロー・コンテンツ |
対応ブラウザ | caniuseで確認 |
<dialog>タグの説明
<dialog>
は、任意のタイミングで開くダイアログボックスを作成する祭に使用します。これはユーザーに示すアラート、インスペクター、モーダルウィンドウのような対話的なコンポーネントとして機能します。
<dialog>タグの特徴
- この要素はJavaScriptを使って呼び出します。初期値ではレイアウトに影響を与えません。
- ダイアログを表示する場合、HTMLDialogElementオブジェクトのshowModalメソッドを呼び出します。ダイアログを閉じる場合はcloseメソッドを使います。
<form>
のmethod
属性にdialog
を指定した場合、ダイアログを閉じる操作が行えます。この時、HTTPリクエストは発生しません。- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<dialog>に指定できる主な属性
- open
- ダイアログが操作可能な状態であることを表します。この属性が指定されていない時は、ダイアログをユーザーに表示すべきではありません。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<dialog>の使い方とサンプル
このタグを使ったマークアップのサンプルです。JavaScriptのClickイベントを使って、HTMLDialogElementオブジェクトのshowModalメソッドを呼び出します。
HTML
<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>
表示確認