Modal
模态框 / 对话框
WebMobileDesktop上手难度: 中等
点了一下之后，屏幕中间冒出一个窗口，不处理它就别想继续用后面的页面。
Live Demo
真的可以点你刚才看到的这个：点「删除照片」后屏幕中间弹出的小窗、写评论时从屏幕中间展开的输入框、登录注册页那个居中的表单面板。
它到底是什么
Modal 会「拦住」用户：底层页面变灰、不可点击、不响应滚动。它的正当用途只有两个——必须立即做决定，或者需要一个专注的输入环境。其余情况基本都能用非模态方案替代。
对话框弹窗modaldialog弹出窗口模态
Anatomy · 它由什么组成
Scrim遮罩
半透明黑，点击通常关闭
Dialog Surface对话框
白底，圆角 12px，max-width 480px
Title标题
写明后果而非「提示」
Body内容
不超过 3 行
Actions操作区
右对齐，取消 + 确认
Close关闭
右上角 ✕ 或按 Esc
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 必须立即做决定才能继续（二次确认） | 用 |
| 需要一个专注的输入环境（登录、评论） | 用 |
| 需要打断用户注意力的严重错误 | 用 |
| 只是想展示一条信息 | 不用 |
| 承载多层任务（表单很长） | 不用 |
每点一次按钮就弹一个框，是最常见的体验灾难。
Modal 里再放 Modal 是设计事故——改用 Breadcrumb 或 Stepper。
Similar Patterns
别搞混一句话区分：点了一下之后，屏幕中间冒出一个窗口，不处理它就别想继续用后面的页面。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
点「删除」后弹出确认 Dialog：标题写明后果，正文不超过两行，底部右对齐「取消」和红色「删除」，支持 Esc 和点击遮罩关闭。
不要只对 AI 说
Bad → Better不要这样对 AI 说
点一下弹个框出来。
改成这样说
弹出确认 Dialog（role=dialog aria-modal）：标题写明后果不用「提示」，正文 ≤2 行，底部右对齐「取消 + 红色删除」，Esc 和点击遮罩关闭，打开时 focus trap 并锁 body 滚动。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。