確認ダイアログ（削除確認）
これは削除など取り消せない操作の直前に表示する確認ダイアログです。半透明の黒い背景（ cf-mask ）が画面全体を覆い、その中央に注意アイコン・見出し・説明・「キャンセル」と「削除する」の2ボタンを並べたカードを表示します。
解説
これは削除など取り消せない操作の直前に表示する確認ダイアログです。半透明の黒い背景（cf-mask）が画面全体を覆い、その中央に注意アイコン・見出し・説明・「キャンセル」と「削除する」の2ボタンを並べたカードを表示します。開閉は is-open クラスの付け外しだけで行い、背景には backdrop-filter:blur を効かせて後ろのページを軽くぼかし、ダイアログに視線を集めます。JavaScript なしで onclick 属性だけで動く点も特徴です。
使いどころ
- データやアカウントの削除といった破壊的操作の最終確認
- 未保存のまま画面を離れようとしたときの警告
- 決済や送信など、後戻りできない処理の前置き
危険を示す赤系の色は .cf-open や注意アイコンの background で調整できます。本番運用では、背景クリックや Esc キーで閉じられるようにし、開いた瞬間に確認ボタンへ focus を移す、role="dialog" と aria-modal="true" を付けるといったキーボード・スクリーンリーダー対応を加えると、よりアクセシブルになります。
使用例・適したシーン
- 利用規約・プライバシーポリシー表示
- 画像拡大表示
- 確認ダイアログ
よくある質問
JavaScript ファイルは必要ですか？
いいえ。開閉は HTML の onclick 属性で is-open クラスを付け外しするだけなので、別途 JavaScript ファイルは不要です。より高度なキーボード操作を足したい場合のみスクリプトを追加します。
背景クリックで閉じられますか？
この基本形では確認・キャンセルの2ボタンでのみ閉じます。背景クリックや Esc キーでの閉じる挙動は、数行のイベント処理を追加することで実装できます。