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”「背后带深色背景的浮动框」

标本可交互 —— 点点看。Specimen is live — try it.

Anatomy — every part, named解剖 —— 每个部件的名字

1 Modal 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> 模态界面
2 Scrim遮罩层（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.

用 <dialog> 构建模态对话框，并用 HTMLDialogElement.showModal() 打开，这样浏览器会把它放进顶层、让背后的页面变为 inert、提供 ::backdrop 并支持 Escape 键。需要带上下文的编辑用侧边抽屉（Drawer），紧凑或移动端操作用底部面板（Sheet）；只有当这些界面确实是模态时，才添加遮罩层（scrim）和模态焦点管理。

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:

调试我的对话框/抽屉/底部面板（HTMLDialogElement、Radix Dialog、vaul）。逐一排除：该用 showModal() 的地方用了 show()，导致没有 ::backdrop、背景也不是 inert；body 滚动没锁住，页面在背后跟着滚；关闭后焦点没有还给触发按钮；想拦截 Escape 却没处理 onCancel，导致一按就关；嵌套对话框把父级也关掉了。症状是：

In code代码里叫什么

Framework框架	Symbol符号	Note说明
HTML	<dialog>
HTML	HTMLDialogElement.showModal()
ARIA	role="dialog"
Radix	Dialog
shadcn/ui	Sheet

Anatomy — every part, named解剖 —— 每个部件的名字

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

In code代码里叫什么

See also相关词条