HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<dialog>
ダイアログ（Dialog）要素。ユーザーとの対話のためのダイアログボックスやウィンドウを表現します。
info
概要
<dialog> 要素は、ユーザーに情報を提供したり、入力を求めたりするためのダイアログボックス（ポップアップウィンドウ）を作成します。
この要素は、デフォルトでは非表示であり、JavaScriptの showModal()（モーダルダイアログ）や show()（非モーダルダイアログ）メソッド、または open 属性によって表示されます。
play_circle
デモ (静的表示)
HTML (Source)
<!-- デフォルトは非表示です -->
<dialog id="myDialog">
<p>これはダイアログボックスのコンテンツです。</p>
<form method="dialog">
<button>閉じる</button>
</form>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()" class="button-link">
ダイアログを開く
</button>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| open | ブール値属性。指定された場合、ダイアログはユーザーに対して表示されます。デフォルトでは非表示です。 |
code
実用例
1. open属性による初期表示（非モーダル）
<dialog open>
<p>これはページロード時に表示されるダイアログです。</p>
</dialog>
2. JavaScriptによるモーダルダイアログの表示・非表示
<dialog id="modalConfirm">
<h3>本当に削除しますか？</h3>
<form method="dialog">
<button value="cancel">キャンセル</button>
<button value="delete">削除</button>
</form>
</dialog>
<script>
// モーダル表示
document.getElementById('openButton').addEventListener('click', () => {
document.getElementById('modalConfirm').showModal();
});
</script>
3. フォーム送信時の戻り値
<dialog id="returnValueDialog">
<form method="dialog">
<label for="username">ユーザー名:</label>
<input id="username" name="username">
<button value="submit">送信</button>
<button value="cancel">キャンセル</button>
</form>
</dialog>
<script>
// ダイアログが閉じられたときの処理 (closeイベント)
document.getElementById('returnValueDialog').addEventListener('close', (e) => {
console.log(e.target.returnValue); // 閉じられたときの戻り値（例: "submit" または "cancel"）
});
</script>
lightbulb
知っておくべき重要事項
info
モーダルダイアログと <form method="dialog">
JavaScriptの
JavaScriptの
dialog.showModal() で表示したモーダルダイアログは、$\text{Esc}$ キーで閉じることができ、また <form method="dialog"> 内のボタンが押されると自動的に閉じます。このフォームメソッドは、送信処理を行わずにダイアログを閉じるための専用の方法です。
accessibility_new
アクセシビリティ
showModal() を使用してダイアログを開くと、ブラウザは自動的にモーダルセマンティクスを適用します。これにより、ダイアログが開いている間は背景のコンテンツにアクセスできなくなり、フォーカスがダイアログ内に閉じ込められます。これにより、スクリーンリーダーのユーザーにとって使いやすくなります。