Modal
模态框
Aliases:弹窗对话框模态弹窗确认弹窗弹出对话框遮罩弹窗网页中间弹出来的窗口
What is it
A dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
Name disambiguation
A modal interrupts and demands resolution. A drawer slides from the side keeping context. A popover anchors to its trigger without blocking. A sheet covers only the current window on macOS.
Interactive playground
Try it. Make an informed choice.Open the dialog and explore confirmation and dismissal.
Loading lab…
What to look for
- 01Keep focus inside while the modal is open.
- 02Return focus to the trigger after dismissal.
✓ When to use
- High-stakes confirmation such as delete or payment
- A task must finish before the flow continues (wizard, sign-in)
- Focused temporary content like a detail view or quick edit
✕ When not to use
- Supporting, dismissible content — use a popover or tooltip
- Users need the underlying page for context — use a drawer
- Long scrolling content on mobile — a full page holds up better
Variants
Centered
居中对话框
The classic: title, body and action row
Confirm
紧凑确认框
Compact, one sentence plus two buttons
Sheet
底部面板
Mobile pattern, rising from the bottom for longer content
Implementation
position: fixedinset: 0z-indextransformbackground-colorBackdrop is fixed inset-0 with translucent black; center the panel with flex or auto margins. Lock body scroll on open, move focus into the panel, close on Esc and backdrop click. Enter animation: scale 0.96→1 with fade, ~200ms; respect prefers-reduced-motion.
Platform API
<dialog>role="dialog"aria-modal="true"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| ARIA | role="dialog" |
| shadcn/ui | Dialog |
| MUI | Modal / Dialog |
| AntD | Modal |
Compare
Full comparison →| Modal模态框 | Bottom Sheet底部抽屉 | Drawer抽屉 | Popover气泡卡片 | |
|---|---|---|---|---|
| Interruption | High — backdrop blocks the page | Medium-high — backdrop blocks, but a swipe dismisses fast | High — backdrop covers the page while open | Low — no backdrop, page stays live |
| Content capacity | Medium — short content and small forms | Medium-high — action lists and short forms fit | High — long lists and forms fit | Medium — small interactive content |
| Mobile friendly | Medium — go full-screen for long content | Excellent — the thumb zone is the bottom of the screen | Good — edge sliding feels natural | Poor — anchored position overflows easily |
Related concepts
A panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.
ComponentsAlternativeA non-modal layer that pops up beside its trigger on click, carrying medium-complex content such as text, a mini-form or a date picker. No backdrop and no blocking of the rest of the page; clicking outside or pressing Esc closes it.
ComponentsAlternativeA small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsSimilarAn inline, status-coloured banner inside the page flow for messages that must be seen: errors, warnings, important notices. It takes layout space instead of overlaying, and stays until the issue is resolved or the user dismisses it.
ComponentsSimilarNot to be confused with
A drawer slides from an edge with more room; a modal is centered and more interrupting.
A popover is non-modal and anchored; a modal dims the page and blocks.
Alert is in-page messaging; a modal is a blocking overlay.
Lightbox is media zoom; a modal hosts general tasks.