背景ぼかしモーダル
ボタンを押すと背景がぼけて前面にダイアログが浮かぶ、確認用モーダルです。背景オーバーレイに backdrop-filter:blur() を当てて後ろのコンテンツをぼかし、 opacity と pointer-events の切り替えで表示・非表示を制御します。
解説
ボタンを押すと背景がぼけて前面にダイアログが浮かぶ、確認用モーダルです。背景オーバーレイに backdrop-filter:blur() を当てて後ろのコンテンツをぼかし、opacity と pointer-events の切り替えで表示・非表示を制御します。ダイアログは transform:scale() でわずかに拡大しながら現れ、登場に弾みのあるイージングを使っています。開閉は少量の JavaScript でクラスを付け外しするだけのシンプルな構成です。
使う場面
- 削除や送信など、実行前の確認ダイアログ
- 画像や詳細を前面に出すライトボックス的な表示
- 初回ガイドやお知らせのポップアップ
ぼかしの強さは blur() の数値、暗さは背景色の不透明度で調整します。背景クリックで閉じる挙動も実装済みなので、誤操作で閉じたくない確認では外す判断もできます。アクセシビリティ面では、開いた時に焦点をダイアログへ移し、Escape キーで閉じられるようにすると安心です。backdrop-filter 非対応のブラウザでは半透明の暗幕のみになります。
使用例・適したシーン
- 利用規約・プライバシーポリシー表示
- 画像拡大表示
- 確認ダイアログ
よくある質問
ぼかしの強さを変えられますか。
backdrop-filter の blur の数値を大きくするほど背景が強くぼけます。あわせて背景色の不透明度を変えると暗さも調整できます。
古いブラウザでも背景はぼけますか。
backdrop-filter に対応していない環境ではぼけず、半透明の暗い幕だけになります。ぼかしは演出の補助と考え、なくても成立する設計にしておくと安全です。