中央モーダルダイアログ
ボタンを押すと画面中央に開くモーダルダイアログです。半透明の黒いオーバーレイ（ rgba(0,0,0,.5) ）で背景を覆い、その上に白いカードを place-items:center で中央配置しています。
このパーツの使いどころと実装ポイント
ボタンを押すと画面中央に開くモーダルダイアログです。半透明の黒いオーバーレイ（rgba(0,0,0,.5)）で背景を覆い、その上に白いカードをplace-items:centerで中央配置しています。表示の切り替えはmc.showクラスの付け外しでdisplayを変えるだけのシンプルな仕組みで、確認用の見出し・本文・「キャンセル／実行」の2ボタンという、確認ダイアログの定番構成になっています。
向いている場面
- 削除や送信など、取り消せない操作の前の最終確認
- 会員登録やメール購読への誘導ポップアップ
- 規約同意やクーポン表示など、注目を集めたい一時的な案内
カスタマイズの勘所
カードの幅は300px固定なので、長い文章を入れるならmax-widthに変えて狭い画面でも収まるようにすると安全です。「実行」ボタンは目立つ色、「キャンセル」は控えめな色にすると、押し間違いを減らせます。オーバーレイをクリックしたら閉じる挙動を足すと操作感が良くなります。
アクセシビリティの注意
開いている間はキーボードのフォーカスをモーダル内に留め、Escキーで閉じられるようにすると、キーボード利用者にも親切です。背景のスクロールを止める処理も加えると、操作が散らからずに済みます。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
背景の暗い部分をクリックして閉じられるようにできますか？
標準ではキャンセルボタンで閉じますが、オーバーレイ要素のクリックを検知し、カード自身がクリックされた場合は無視する条件を加えると、背景クリックで閉じる挙動を実現できます。
モーダルを開いている間、後ろのページがスクロールしてしまいます。
モーダルを開くタイミングでbody要素にoverflow:hiddenを当て、閉じるときに戻すと背景のスクロールを止められます。これにより操作対象がモーダルに集中します。