底部弹层
从屏幕底部升起来的半屏面板：分享、筛选、选规格——拇指够得着，还能下拉关掉。
对话框（弹窗）
Modal Dialog
屏幕中间弹出的那个框：背景变暗，只能先处理它——确认删除、填写小表单都靠它。
全平台通用浮层浮层组件
大白话说明
对话框用「打断」换取注意力：遮罩压暗背景，焦点锁在框内，逼用户先做完这一个决定。标题说清要决定什么，正文给后果，主按钮放右且用危险色标危险动作。
什么时候用
不可逆操作确认、必须先完成的短表单、关键信息的一次性告知。
什么时候不用
内容超过一屏、或需要查阅背景页面信息时别用弹窗——用户被锁在框里看不到外面，应该用新页面或抽屉。
细节与变体
- 弹窗最多套一层，弹窗里再弹弹窗是设计事故
- 键盘 Esc 能关、焦点进来先落在最安全的按钮上（取消而非确认删除）
- 主按钮文案写具体动作（删除这篇文章），不要写「确定」
配套效果见下方「可用效果」。
配套提示词（点开填空、复制）
可用效果
参考实现（开源）
- Radix UI（无样式原语） ↗ MIT · 免费（MIT）
只管行为不管长相的组件原语：弹层、菜单、开关的键盘与焦点处理都替你做好了。
- shadcn/ui 组件库 ↗ MIT · 免费（MIT）
不是装进项目的库，而是把组件源码复制进你自己的仓库——改起来毫无阻力，AI 也最熟它。
- Chakra UI ↗ MIT · 免费（MIT）
以可访问性为底线的 React 组件库：样式用 props 写，上手快。