確認モーダル（ダイアログ）

このパーツの使いどころと実装ポイント

アイコン・メッセージ・2つのボタンを縦に並べた、定番の確認ダイアログです。背景に半透明の黒いオーバーレイをposition:fixedで全面に敷き、その中央に白いカードを浮かせます。表示・非表示はis-onクラスの付け外しで切り替え、opacityとわずかなtransform:scaleのアニメーションでふわっと開くようにしています。背景にはbackdrop-filterでぼかしもかかります。

向いている場面

削除・退会・送信など、取り消せない操作の直前に確認を挟みたい場面に向きます。管理画面、会員サイトのアカウント設定、フォーム送信前の最終確認などで使われます。危険な操作のボタンは赤、キャンセルは控えめなグレーにして、誤操作を防ぐ配色になっています。

カスタマイズと注意点

• アイコンはインラインSVGで入っているので、用途に合わせて差し替えられます。文言は見出しと本文を書き換えるだけで使い回せます。
• 開閉にはJavaScriptが必要です。「開く」ボタンや「キャンセル」「削除する」ボタンのクリックでis-onを付け外しする処理を用意してください。
• アクセシビリティのため、開いたときはダイアログ内のボタンへフォーカスを移し、背景クリックやEscキーで閉じられるようにすると親切です。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。