对话框和弹出框怎么选？
一句话做出判断
对话框会先停住页面，等你完成任务。弹出框留在按钮旁，不会停住整页。
一定要先完成一件事时，用对话框。只需补充信息或做小操作时，用弹出框。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Modal Dialog
↗ 模态对话框
模态对话框是一个聚焦的小窗口，在关闭或完成前，会挡住当前页面的其他操作。
确认删除账户时，键盘焦点会留在对话框内；取消后，焦点会回到原来的按钮。
- 什么时候用
- 简短决定或小任务需要完整注意力时，就使用模态对话框。
- 什么时候不要用
- 不要在对话框上再叠另一个对话框，也不要用它显示普通低风险信息。
- 代码里的名称
<dialog> / role="dialog" aria-modal="true"
Popover
↗ 弹出框
弹出框是连在打开控件旁的小面板，可以放有结构的内容和操作，而且不会挡住整个页面。
popover attribute / Popover点击头像后，会打开小型个人资料，显示角色、联系方式和“关注”操作。
- 什么时候用
- 内容应该放在触发来源旁，而且用户仍可继续操作页面时，就使用弹出框。
- 什么时候不要用
- 只有一小段标签提示时，不要使用弹出框，请改用工具提示。
- 代码里的名称
popover attribute / Popover
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 模态对话框Modal Dialog | 简短决定或小任务需要完整注意力时，就使用模态对话框。 | 不要在对话框上再叠另一个对话框，也不要用它显示普通低风险信息。 | <dialog> / role="dialog" aria-modal="true" |
| 弹出框Popover | 内容应该放在触发来源旁，而且用户仍可继续操作页面时，就使用弹出框。 | 只有一小段标签提示时，不要使用弹出框，请改用工具提示。 | popover attribute / Popover |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 模态对话框（Modal Dialog）、弹出框（Popover） 中，为真实用户流程选出最合适的界面模式。判断规则：对话框会先停住页面，等你完成任务。弹出框留在按钮旁，不会停住整页。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。