通知・オーバーレイ
確認ダイアログ
「本当に削除しますか？」をOK/キャンセルで確認。破壊的操作の前に一歩置く確認UIのパターン。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるため、オーバーレイを position:absolute（ステージ基準）で実装しています。実際のページで画面全体に重ねるときは position:fixed に変え、body 直下など高い階層へ置いてください。
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="actions">
<button class="delete-btn" id="deleteBtn">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M2 3.5h10M5.5 3.5V2.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v1M5 3.5l.5 8M9 3.5l-.5 8M3.5 3.5l.5 8h6l.5-8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
削除する
</button>
<p class="result-msg" id="resultMsg"></p>
</div>
<div class="backdrop" id="backdrop" aria-hidden="true"></div>
<div class="confirm" id="confirm" role="alertdialog" aria-modal="true" aria-labelledby="confirmTitle" aria-hidden="true">
<div class="confirm-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="#c0492f" stroke-width="2"/>
<line x1="12" y1="7" x2="12" y2="13" stroke="#c0492f" stroke-width="2" stroke-linecap="round"/>
<circle cx="12" cy="16.5" r="1" fill="#c0492f"/>
</svg>
</div>
<p class="confirm-title" id="confirmTitle">本当に削除しますか？</p>
<p class="confirm-desc">この操作は取り消せません。</p>
<div class="confirm-actions">
<button class="btn-cancel" id="confirmCancel">キャンセル</button>
<button class="btn-danger" id="confirmOk">削除する</button>
</div>
</div>
</div>