Modal dialog
A window that takes over the screen and blocks everything behind it until you act on it or close it.
See it
What it is
A modal dialog is a layer that sits above the page, dims what's behind it with a scrim, and refuses to let you touch anything else until you confirm, cancel, or close. The word 'modal' is the whole point: the app is in a temporary mode, and that mode owns your attention.
Reach for one when the interruption is the feature: destructive confirmations ('Delete 40 files?'), a short focused task like renaming or inviting, or an error the user genuinely cannot ignore. Anything longer than a screenful, or anything the user may want to reference the page for, belongs on its own route or in a drawer instead. On the web the native building block is the HTML 'dialog' element opened with showModal(), which gives you the top layer, the ::backdrop, and Escape-to-close for free.
Gotcha: a modal is a keyboard trap by design, and who builds the trap depends on what you used. A native 'dialog' opened with showModal() already makes the rest of the page inert and keeps Tab inside it, plus Escape closes it. A hand-rolled div has to recreate every bit of that by hand. Either way two things are still on you: put focus somewhere sensible on open (the safest control, not always the first one), and return focus to the button that opened it on close. Skip those and screen reader users end up tabbing around a page they can't see. Second trap: modals stacking on modals. If you need a second one, the first one was probably the wrong pattern.
Ask AI for it
Build a modal dialog using the native HTML 'dialog' element with showModal(). Centered card, max-width 32rem, rounded corners, soft shadow, 24px padding, title + body copy + a right-aligned row of Cancel and confirm buttons. Dim the page behind it with a ::backdrop at around 50% black. Let showModal() handle inertness and focus containment rather than writing a custom trap, move focus to the Cancel button on open, close on Escape and on backdrop click, and return focus to the trigger button on close. Lock body scroll while open. Animate in with a 150ms fade plus a small scale from 0.97 to 1, and respect prefers-reduced-motion.