モーダルダイアログ（バックドロップフェード）
クラシックなモーダル実装。バックドロップフェード + センター配置 + Escape キー対応 + フォーカス管理付き。JS で開閉制御。
解説
モーダルダイアログ（バックドロップフェード）は、UI コンポーネントカテゴリの「モーダル」に分類される実装パターンです。CSS と JavaScript の組み合わせで構成され、難易度は中級レベル。
バックドロップフェード + ポップ表示のモーダルダイアログ。Esc キー・外側クリック・閉じるボタンに対応したアクセシブル実装。
<dialog> タグ登場以前から使われている、伝統的なモーダル実装パターンです。Bootstrap / Tailwind UI ライクな見た目で、レガシーブラウザでも動作する安心感があります。
背景クリックで閉じる、Escape キーで閉じる、フォーカス管理など、モーダルに必要な基本機能を JavaScript で実装しています。
仕組み
下記コードタブから HTML / CSS / JS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
JavaScript 部分は vanilla（プレーン）JS で書かれており、jQuery / React / Vue いずれの環境にも持ち込めます。
WAI-ARIA 属性を活用したアクセシブルな実装です。スクリーンリーダー・キーボード操作にも配慮しています。
注意点 / カスタマイズ時のポイント
モダンな案件では <dialog> タグ + showModal() を推奨（このサンプルより軽量でアクセシブル）。レガシー対応が必要な案件のみ、このパターンを採用してください。
使用例・適したシーン
- 利用規約・プライバシーポリシー表示
- 画像拡大表示
- 確認ダイアログ
よくある質問
<dialog> タグとどっちを使うべき？
2026 年現在、新規案件は
<dialog> タグ + showModal() を推奨。フォーカストラップ・トップレイヤー描画・backdrop 装飾までブラウザがやってくれて、コード量が 1/3 になります。このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
jQuery でも書けますか？
この実装は vanilla JavaScript で書いています。jQuery が必要であれば
document.querySelector を $() に置き換える程度で動作しますが、近年は jQuery を使わない方が軽量で推奨されます。