Modal Dialog vs. Drawer vs. Sheet 模态对话框 vs. 抽屉 vs. 底部面板web
Three overlay patterns distinguished by placement, scope, and task depth
三种覆盖层模式，按位置、范围和任务深度区分
also called也叫
modal, side panel, slide-over, bottom sheet模态框、侧面板、侧滑面板、底部面板
If you called it…如果你管它叫……
“the popup in the middle that blocks the page”「中间那个挡住页面的弹窗」
“the panel that slides in from the side”「从侧边滑进来的面板」
“the tray that comes up from the bottom”「从底部升上来的托盘」
“an overlay for editing without leaving the page”「不离开页面就能编辑的覆盖层」
“the floating box with a dark background behind it”「背后带深色背景的浮动框」
Workspace
Delete file?
Blocks everything behind it.
Edit details
Blocks everything behind it.
Share with…
Blocks everything behind it.
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
1Modal surface模态界面<dialog>
“The actual floating box in the middle” is the modal surface.
“中间那个真正的浮动框”就是模态界面。
Prompt fragmentPrompt 片段
the <dialog> modal surface centered in the top layer above its backdrop
居中于顶层、位于 ::backdrop 之上的 <dialog> 模态界面
2Scrim遮罩层（Scrim）::backdrop
“The dark see-through background behind the popup” is the scrim.
“弹窗背后那层深色半透明的背景”就是遮罩层。
Prompt fragmentPrompt 片段
the <dialog>::backdrop scrim covering and dimming the page behind the modal surface
覆盖并压暗模态界面背后页面的 <dialog>::backdrop 遮罩层
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
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调试 Prompt —— 当它不听话时
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:
# Modal Dialog vs. Drawer vs. Sheet · 模态对话框 vs. 抽屉 vs. 底部面板
UI reference — https://K3tty5555.github.io/LearnUI_PM/web/dialog-drawer-sheet/
**Three overlay patterns distinguished by placement, scope, and task depth**
三种覆盖层模式，按位置、范围和任务深度区分
**Also called / 也叫:** modal, side panel, slide-over, bottom sheet / 模态框、侧面板、侧滑面板、底部面板
## Anatomy — every part, named / 解剖
1. **Modal surface · 模态界面** (`<dialog>`)
“The actual floating box in the middle” is the modal surface.
“中间那个真正的浮动框”就是模态界面。
Prompt fragment: the <dialog> modal surface centered in the top layer above its backdrop
2. **Scrim · 遮罩层（Scrim）** (`::backdrop`)
“The dark see-through background behind the popup” is the scrim.
“弹窗背后那层深色半透明的背景”就是遮罩层。
Prompt fragment: the <dialog>::backdrop scrim covering and dimming the page behind the modal surface
## Prompt / 提示词
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.
用 <dialog> 构建模态对话框，并用 HTMLDialogElement.showModal() 打开，这样浏览器会把它放进顶层、让背后的页面变为 inert、提供 ::backdrop 并支持 Escape 键。需要带上下文的编辑用侧边抽屉（Drawer），紧凑或移动端操作用底部面板（Sheet）；只有当这些界面确实是模态时，才添加遮罩层（scrim）和模态焦点管理。
## Debug prompt / 调试提示词
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:
调试我的对话框/抽屉/底部面板（HTMLDialogElement、Radix Dialog、vaul）。逐一排除：该用 showModal() 的地方用了 show()，导致没有 ::backdrop、背景也不是 inert；body 滚动没锁住，页面在背后跟着滚；关闭后焦点没有还给触发按钮；想拦截 Escape 却没处理 onCancel，导致一按就关；嵌套对话框把父级也关掉了。症状是：
## In code / 代码里叫什么
- **HTML** `<dialog>`
- **HTML** `HTMLDialogElement.showModal()`
- **ARIA** `role="dialog"`
- **Radix** `Dialog`
- **shadcn/ui** `Sheet`
