<dialog> 任意のタイミングで開くダイアログボックスを作成する

<dialog>タグの説明

<dialog>は、任意のタイミングで開くダイアログボックスを作成する祭に使用します。これはユーザーに示すアラート、インスペクター、モーダルウィンドウのような対話的なコンポーネントとして機能します。

<dialog>タグの特徴

• この要素はJavaScriptを使って呼び出します。初期値ではレイアウトに影響を与えません。
• ダイアログを表示する場合、HTMLDialogElementオブジェクトのshowModalメソッドを呼び出します。ダイアログを閉じる場合はcloseメソッドを使います。
• <form>のmethod属性にdialogを指定した場合、ダイアログを閉じる操作が行えます。この時、HTTPリクエストは発生しません。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<dialog>に指定できる主な属性

open

ダイアログが操作可能な状態であることを表します。この属性が指定されていない時は、ダイアログをユーザーに表示すべきではありません。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<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>