ネイティブモーダル（dialog）
<dialog> showModal() show() ::backdrop
このページでは、JavaScriptライブラリ不要でモーダルを実装できる <dialog> 要素の使い方を確認できます。showModal()・show()・バックドロップクリック制御の3パターンをインタラクティブなデモで紹介します。
デモ1：基本モーダル（showModal）
showModal() でバックドロップ付きのモーダルを表示します。<form method="dialog">の submit でダイアログが自動的に閉じ、returnValueに押したボタンの value が入ります。
showModal() でバックドロップ付きのモーダルを表示します。<form method="dialog"> の submit で自動的に閉じます。
デモ2：非モーダル（show）
show() はバックドロップを表示せず、フォーカスもトラップしません。 ページ上の他の要素を操作したまま、補足情報などを表示するのに適しています。
← ダイアログが開いていてもこのテキストを選択できます（ページ操作をブロックしません）
show() はバックドロップなし・フォーカストラップなしで表示します。ページの他の要素を操作したままにできます。
デモ3：バックドロップクリックで閉じる
バックドロップ（暗い背景）をクリックしたときに閉じる実装です。 バックドロップのクリックは e.target === dialog で判定できます（コンテンツ内のクリックは dialog の子要素がターゲットになるため除外されます）。
バックドロップをクリックすると閉じます。e.target === dialogで判定しています。
HTML
<!-- 基本のダイアログ構造 -->
<dialog id="my-dialog">
<form method="dialog">
<h2>確認ダイアログ</h2>
<p>この操作を実行しますか？</p>
<menu>
<button type="submit" value="ok">OK</button>
<button type="submit" value="cancel">キャンセル</button>
</menu>
</form>
</dialog>
<button id="open-btn">モーダルを開く</button>JavaScript
const dialog = document.querySelector('#my-dialog');
const openBtn = document.querySelector('#open-btn');
// ✅ デモ1: showModal() — モーダルダイアログ（バックドロップあり）
openBtn.addEventListener('click', () => {
dialog.showModal(); // フォーカスを捕捉し、バックドロップを表示
});
// form[method="dialog"] の submit で自動的に閉じる
// dialog.returnValue に選択した button の value が入る
dialog.addEventListener('close', () => {
console.log('閉じた理由:', dialog.returnValue); // "ok" or "cancel"
});
// ✅ デモ2: show() — 非モーダルダイアログ（バックドロップなし）
dialog.show(); // ページ操作をブロックしない、フォーカストラップなし
// ✅ デモ3: バックドロップクリックで閉じる
// バックドロップをクリックすると e.target が dialog 要素自体になる
dialog.addEventListener('click', (e) => {
if (e.target === dialog) {
dialog.close();
}
});
// ✅ CSS: バックドロップのスタイリング
/*
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
*/比較：showModal() vs show()
| 観点 | showModal() | show() |
|---|---|---|
| ::backdrop | ✅ 表示される | ❌ 表示されない |
| フォーカストラップ | ✅ ダイアログ内に限定 | ❌ ページ全体に及ぶ |
| ページ操作のブロック | ✅ ブロックする | ❌ ブロックしない |
| Esc で閉じる | ✅ 自動対応 | ❌ 自動対応なし |
| 用途 | 確認・フォーム・アラート | 補足情報・パネル |
ライブラリを使ったモーダルの実装
アクセシビリティ・アニメーション・スタック管理など、より高度な機能が必要な場合はUIライブラリのModalコンポーネントが便利です。
🤖 AIプロンプトテンプレート
以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。 - HTML の <dialog> 要素を使ってモーダルダイアログを実装する - showModal() でモーダルを開き、::backdrop でオーバーレイを表示する - <form method="dialog"> と close() の両方で閉じられるようにする - バックドロップ（背景）をクリックしたときもダイアログが閉じるようにする - useRef で dialog 要素を参照し、open/close をハンドリングする - dialog.returnValue を使って OK / キャンセルの選択結果を取得する - コメントは日本語で記述する
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
Zenn