This action keeps its context inside the demo frame.
This action keeps its context inside the demo frame.
This action keeps its context inside the demo frame.
Modal Dialog vs. Drawer vs. Sheet
/ <dialog> · HTMLDialogElement.showModal() /
also called modal, side panel, slide-over, bottom sheet
A modal dialog is centered, blocks the underlying interface, and suits a short decision or focused task. A drawer slides from a side edge and preserves more visual context for browsing or editing. A sheet is edge-attached too, most often rising from the bottom for compact actions or mobile layouts; all three need explicit dismissal and managed focus when modal.
If you called it…
…you meant a modal dialog vs. drawer vs. sheet.
Anatomy — every part, named
- 1Modal surface
<dialog>“The actual floating box in the middle” is the modal surface.
- 2Scrim
::backdrop“The dark see-through background behind the popup” is the scrim.
Prompt — paste into your agent
Use a Modal Dialog built with <dialog> and open it with HTMLDialogElement.showModal() so the browser places it in the top layer, makes the page behind it inert, provides ::backdrop, and supports Escape. Use a side Drawer for contextual editing or a bottom Sheet for compact/mobile actions; add a scrim and modal focus management only when those surfaces are actually modal.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my dialog/drawer/sheet (HTMLDialogElement, Radix Dialog, vaul). Rule out: show() used where showModal() was needed so there is no backdrop and no inert background; body scroll not locked so the page scrolls behind; focus not returned to the trigger on close; Escape closing it because onCancel is unhandled when you wanted it blocked; a nested dialog closing its parent. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <dialog> | |
| HTML | HTMLDialogElement.showModal() | |
| ARIA | role="dialog" | |
| Radix | Dialog | |
| shadcn/ui | Sheet |