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.
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.
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 |