HTML

The dialog element is an HTML element used to display modal dialogs within a web page.

dialog 要素

　dialog要素は、Webページ内にモーダルダイアログを表示するためのコンテナ要素です。モーダルダイアログは、ページ上で選択肢を提示したり、ユーザーの注意を引くために使用されます。ユーザーがダイアログを閉じるまで、他のページ要素との対話がブロックされます。

<dialog open>これは、ダイアログのサンプルです。</dialog>

　これだけで、dialog要素の中身を表示することができます。

　dialog要素は、open属性を持つことができます。これにより、ページの読み込み時にダイアログを自動的に開くことができます。ダイアログを閉じるためには、ボタンなどの閉じるための要素を含める必要があります。

<dialog open>
	<h2>モーダルダイアログのタイトル</h2>
	<p>モーダルダイアログの本文</p>
	<button>ダイアログを閉じる</button>
</dialog>

　これが、dialog要素の基本的な構文となりますが、このままではダイアログを閉じることができません。表示、非表示を操作するには、JavaScriptが必要となります。

　以下は、ダイアログを表示してから閉じるまでのサンプルコードです。ボタンをクリックするとダイアログが開き、ダイアログ内の「閉じる」ボタンをクリックするとダイアログが閉じます。

<button onclick="openDialog()">ダイアログを開く</button>

<dialog id="myDialog">
	<h2>モーダルダイアログのタイトル</h2>
	<p>モーダルダイアログの本文</p>
	<button onclick="closeDialog()">ダイアログを閉じる</button>
</dialog>

<script>
	function openDialog() {
		document.getElementById("myDialog").showModal();
	}
	
	function closeDialog() {
		document.getElementById("myDialog").close();
	}
</script>

　この例では、dailog要素に id="myDialog" が設定されています。JavaScript関数 openDialog()は、このダイアログを開きます。showModal()メソッドを使用して、ダイアログを表示します。JavaScript関数 closeDialog()は、ダイアログを閉じます。close()メソッドを使用して、ダイアログを非表示にします。

　注意点として、dialog要素は一部のブラウザでサポートされていないため、動作しない場合があります。また、ダイアログを使用する際には、アクセシビリティやセキュリティの観点から十分に注意して使用するようにしましょう。

　dialog要素には、以下のような属性があります。

open

ダイアログを開くための属性。この属性がある場合、ダイアログはページが読み込まれた時に自動的に開かれます。

close

ダイアログを閉じるための属性。この属性がある場合、ダイアログの内部にある要素の clickイベントがトリガーされると、ダイアログが閉じます。

returnValue

ダイアログを閉じた際に、値を返すための属性。ダイアログの結果を受け取るために使用されます。

id

ダイアログ要素を一意に識別するための属性。

class

ダイアログ要素にスタイルを適用するための属性。

　dialog要素は、ダイアログのコンテンツを含めることができます。ダイアログの内部には、テキスト、画像、ボタン、入力フィールドなど、他の HTML要素を配置することができます。ダイアログ内に閉じるための要素を配置することもできます。通常、ボタンやアイコンなどが使用されます。

　dialog要素は、CSSを使用してスタイルを変更することもできます。

#myDialog {
	background-color: lightblue;
	border: 8px solid darkblue;
	border-radius: 10px;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
}

dialog 要素の概要

Category 「カテゴリー」

Flow content 「フロー・コンテンツ」

Sectioning content 「セクショニング・コンテンツ：区分コンテンツ」

Content model 「コンテンツ･モデル」

Flow content 「フロー・コンテンツ」

利用可能な場所

フロー・コンテンツ (Flow content) が期待される場所。

タグの省略

不可。

Attribute 「属性」

open

この属性を付けると、ダイアログが開いた状態になる。論理属性。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

標準的なスタイル

-

Browser support