组件 · 浮层 · 29
对话框
模态框 = 带遮罩的浮层，锁定焦点直到关闭；与抽屉不同，它会阻断背后的页面。
直达修改 Prompt →
Replace file?
The current specimen will be overwritten. This cannot be undone.
对话框是什么？
对话框会打断当前任务。写明遮罩、宽度、标题、关闭和焦点陷阱。
变体
点击属性即可在预览中高亮。
-
- 居中面板 + 背景遮罩、会打断流程的模态框。
-
- 从边缘（底部或侧边）滑入而非居中的对话框。
-
- 模态框后方的变暗遮罩层，用于阻断页面。
-
- 面的横向尺寸（模态最大宽度、侧边栏宽度）。
-
- 面如何关闭：点遮罩、关闭按钮或 Esc。
状态
点击属性即可在预览中高亮。
-
- 输入或报错前字段的默认有效状态。
-
- 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
结构解剖
这些是 Prompt 里应该点名的部件。
什么时候用
- 需要用户做决定的打断：确认、替换、丢弃
- 需要输入的短任务
- 必须先做出选择才能继续
什么时候别用
- 不重要的消息——改用轻提示
- 很长的内容——用整页
- 模态框上再叠模态框
Create a modal dialog.
STYLE
- 480px max width, 16px radius, dim scrim 40%
ACCESSIBILITY
- focus trap, escape to close
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui