確認ダイアログ（削除確認）
破壊的操作の前に出す「本当に削除しますか？」確認モーダル。アイコン + 説明 + 2 ボタンの汎用パターン。
解説
確認ダイアログ（削除確認）は、UI コンポーネントカテゴリの「モーダル」に分類される実装パターンです。CSS のみで構成され、難易度はシンプルレベル。
破壊的操作の前に出す「本当に削除しますか？」確認モーダル。アイコン + 説明 + 2 ボタンの汎用パターン。
仕組み
下記コードタブから HTML / CSS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
JavaScript 部分は vanilla（プレーン）JS で書かれており、jQuery / React / Vue いずれの環境にも持ち込めます。
注意点 / カスタマイズ時のポイント
モーダル表示中は body の overflow: hidden で背景スクロールを止め、Escape キーで閉じる動作を JS で実装するとアクセシブルです。
使用例・適したシーン
- 利用規約・プライバシーポリシー表示
- 画像拡大表示
- 確認ダイアログ
よくある質問
このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。