Modal
模态框 / 对话框
Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
Live Demo
Actually clickableWhat you just saw:The small dialog that appears after you tap "Delete photo", the composer that expands from the center of the screen while you write a comment, the centered form panel on a sign-in or sign-up page.
What it actually is
A modal intercepts the user: the page behind it dims, stops responding to clicks, and stops scrolling. It has exactly two legitimate uses — a decision that must be made right now, or a focused input environment. Almost everything else can be solved with a non-blocking alternative.
Anatomy · What it's made of
Scrim遮罩
Translucent black, usually dismisses on click
Dialog Surface对话框
White background, border-radius 12px, max-width 480px
Title标题
State the consequence, not "Notice"
Body内容
No more than 3 lines
Actions操作区
Right-aligned: cancel + confirm
Close关闭
✕ in the top-right corner, or press Esc
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| A decision is required before anything else can proceed (confirmation) | Yes |
| The user needs a focused input environment (sign-in, comment) | Yes |
| A serious error needs to interrupt the user | Yes |
| You only want to display a piece of information | No |
| It has to carry a multi-step task (a long form) | No |
Popping up a dialog on every button press is the most common experience disaster there is.
A modal inside a modal is a design incident — use breadcrumbs or a stepper instead.
Similar Patterns
Don't mix these upModalCurrent
模态框 / 对话框
Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
Bottom Sheet
底部弹出面板
A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
In one line:Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
Bottom Sheet
底部弹出面板
A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
Drawer
抽屉
A panel that slides in from the edge of the screen, usually from the side, sometimes from the bottom.
Popover
浮出层
A small panel that pops out next to a particular element, visually tethered to the thing that opened it.
Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
How to tell AI
Three levels of promptAdd the component name and specifics
After tapping "Delete", show a confirmation dialog: the title states the consequence, the body is no more than two lines, and the bottom right-aligns "Cancel" and a red "Delete" button. Both Esc and a scrim click dismiss it.
Don't just say this to AI
Bad → BetterDon't say this to AI
Make a dialog pop up when the user clicks.
Say this instead
Show a confirmation dialog (role=dialog aria-modal): the title states the consequence instead of saying "Notice", the body is ≤2 lines, and the bottom right-aligns "Cancel + red Delete". Esc and scrim click both close it; focus is trapped on open and body scroll is locked.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.