POINT !
<dialog> 要素のポイント！
- showModal() メソッドで背景（backdrop）付きのモーダルが1行で実装可能。
- Escキーでの自動閉じなど、アクセシビリティ機能が最初から備わっている。
- ::backdrop 擬似要素で背景のデザインを自由に変更できる。
<dialog> は、Webでのモーダル実装の「正解」とされる要素です。JavaScriptライブラリを使わず、ブラウザ標準の安全なモーダルを作れます。
概要
具体的な役割
詳細確認のポップアップ、ログイン、通知メッセージなどに使用します。
主要な属性
| 属性名 | 説明 |
|---|---|
open |
ダイアログが表示され、操作可能であることを示すブール属性。通常はJSの showModal() で制御します。 |
returnValue |
（プロパティ）close() メソッドに渡された値を保持します。 |
利用例
ブラウザ標準モーダル
JavaScriptで簡単に開閉を制御できます。
CSS Style
dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
dialog { border: none; border-radius: 12px; padding: 0; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.dialog-content { padding: 30px; text-align: center; }
.trigger-btn { padding: 12px 25px; background: #4facfe; color: white; border: none; border-radius: 8px; cursor: pointer; }HTML Structure
<!-- ダイアログ定義 -->
<dialog id="exampleDialog">
<div class="dialog-content">
<h2>確認</h2>
<p>変更を保存してもよろしいですか？</p>
<button onclick="window.exampleDialog.close()">閉じる</button>
</div>
</dialog>
<!-- 起動ボタン -->
<button class="trigger-btn" onclick="window.exampleDialog.showModal()">
モーダルを開く
</button>