Delete Confirmation Modal — Free HTML CSS JS Destructive Action Dialog Snippet

Any destructive, irreversible action — deleting an account, a file, or an order — deserves a confirmation step that clearly explains the consequence and makes the destructive choice visually distinct from the safe one. This snippet builds that pattern: a centered dialog with a warning icon, a clear "can't be undone" message, and two buttons where Cancel is styled neutrally and Delete is styled in a warning red, so a rushed click is far more likely to land on the safe option.

How the open/close animation works

The overlay covers the full viewport with position: fixed; inset: 0 and starts at opacity: 0; pointer-events: none. Opening the modal adds an .open class, which fades the overlay in and simultaneously animates the dialog box itself from a slightly scaled-down, offset position (scale(0.92) translateY(8px)) up to its resting scale(1) translateY(0). Keeping the overlay in the DOM at all times (rather than conditionally rendering it) and toggling opacity/pointer-events is what makes this fade/scale entrance and exit possible — an element removed via display: none cannot transition.

How focus is managed for accessibility

openModal() stores document.activeElement (whatever had focus before the modal opened, typically the trigger button) in lastFocused, then immediately moves focus onto the confirm-delete button. This does two important things: it lets keyboard and screen reader users immediately know what action is available without tabbing, and — because the destructive button most people should still deliberately click rather than hit Enter reflexively — it puts real thought in the user's path since Enter on a freshly-focused destructive button is a common source of complaints if not handled carefully; many teams instead choose to focus Cancel by default for exactly this reason, which is a one-line change here. On closeModal(), focus is returned to lastFocused, so keyboard users land back exactly where they started instead of losing their place in the page.

How Escape and click-outside dismissal work

A keydown listener is attached to document only while the modal is open (added in openModal, removed in closeModal) and closes the modal on Escape. A separate click listener on the overlay checks e.target === overlay — this is what distinguishes a click on the dark backdrop itself from a click that merely bubbled up from inside the dialog box, since clicking inside the box would also technically "hit" the overlay via event bubbling if this check weren't in place.

Why the delete button is a placeholder

confirmDelete() is deliberately left as a simple stub with a comment marking where real API logic belongs — the pattern here (modal chrome, focus handling, keyboard/click dismissal) is meant to be reused regardless of what the actual destructive action does underneath.