跳转到内容

前端与界面 · DEFINED TERM

Modal 模态框

在当前页面上方临时阻断流程,要求用户完成或取消一个任务。

你可能会这样说“删除前弹出确认框,焦点不能跑到背景页面。”

VISUAL EXAMPLE

先看懂它怎么工作

容易误解长流程或大量内容不要塞进模态框
更准确关键确认、短表单和必须处理的提示

MECHANISM

运行机制

  1. 打开遮罩
  2. 锁定背景
  3. 移入焦点
  4. 完成后恢复焦点

USE WHEN

适合这样用

关键确认、短表单和必须处理的提示

NOT FOR

不要这样理解

长流程或大量内容不要塞进模态框

TELL YOUR AGENT

可直接发给 Agent

请按“Modal 模态框”的概念处理这个需求:删除前弹出确认框,焦点不能跑到背景页面。。先说明实现边界,再给出可检查的结果。

ACCEPTANCE

怎么确认它真的做好了

焦点被约束,Esc 和关闭按钮有效,关闭后回到触发位置

OFFICIAL SOURCES

官方来源