对话框
Modal
UI 组件也叫：弹窗、模态框、Dialog、弹出框
一句话：在页面正中弹出的窗口，背后加遮罩，用户必须处理完或关闭它才能继续操作页面。
详细解释
对话框（也常叫弹窗、模态框）出现时，页面其余部分被半透明遮罩盖住并暂时不能操作，注意力被强制集中到窗口里。它通常有标题、内容区和底部按钮（「取消」「确定」），右上角有关闭图标，按 Esc 也能关闭。适合二次确认、填写一个短表单、查看一段需要专心看的内容。
容易混淆的几个：抽屉 从屏幕边缘滑出，能放更多内容，更适合「边看列表边看详情」；气泡卡片 贴着按钮弹出，不加遮罩，只放少量信息；只是告诉用户「保存成功」这种结果，用 轻提示 就够了，不该弹对话框打断用户。
做对话框要注意：打开时焦点移到窗口内，关闭后焦点回到触发按钮；内容过长时只让内容区滚动，标题和按钮保持固定。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
点击「新建项目」按钮弹出一个居中的对话框，宽 520px，背后半透明黑色遮罩；顶部是标题和右上角关闭图标，中间是名称和描述两个输入项，底部右侧放「取消」「创建」按钮；按 Esc 或点关闭图标可关闭，提交时「创建」按钮显示加载状态。
结构与适用场景
结构描述
由全屏半透明遮罩和居中窗口组成，窗口内依次是标题栏（含关闭图标）、内容区和底部按钮区。
适用场景
- 删除、提交等不可撤销操作前，需要用户明确确认
- 需要用户填写 2~5 个字段的短表单，填完就回到原页面
- 必须让用户先看完或做出选择，才能继续后面流程时
不适用场景
- 只是通知操作结果，比如「保存成功」，不需要用户做任何决定
- 内容很长或字段很多，窗口里需要大段滚动时
- 用户需要一边看页面上的列表一边对照填写时
- 一个完整的多步流程，需要能分享链接或刷新后保留进度时
常见坏用法
- 每次操作成功都弹对话框让用户点「确定」，打断操作节奏
- 对话框里再弹对话框，层层叠加，关闭顺序混乱
- 内容过长时整个窗口超出屏幕，底部按钮滚不到或被截断
识别特征
- 页面中央一个带圆角和投影的白色窗口
- 背后整页被半透明深色遮罩盖住
- 右上角有关闭图标，底部右侧有两个按钮
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
dialog[open][role="dialog"][aria-modal="true"][role="alertdialog"].ant-modal.el-dialog.el-message-box[class*="MuiDialog-paper"].arco-modal.t-dialog.n-modal.n-dialog[data-slot="dialog-content"][data-slot="alert-dialog-content"].modal-dialog