模态框

大白话解释

模态框是突然盖在页面正中间的那层小窗口，背景会变暗，你点别的地方点不动，必须先在它上面做个决定才能回去。

你可以把它想成办事窗口前拉下的卷帘门：门外的事暂时全停，你先把手里这张表填完。登录、确认删除、填写资料，基本都是这么弹出来的。

名字里的模态指的就是这种独占状态。好处是能强行把用户注意力拉到当前这件事上，坏处是很容易惹人烦。所以真正该用它的时候是必须马上决策的场景，而不是随便提示一句就弹一个框。

什么时候会遇到

• 看设计稿时页面被一层半透明黑盖住，中间浮出一个小框，旁边写着一堆说明。
• 产品要求用户没填完必填项时不能关掉弹窗，你担心这样会把人逼走。
• 弹窗打开后按键盘上的退出键没反应，或者焦点还留在背后的页面上。
• 弹窗里内容太多，在小屏手机上高度超出了屏幕，底部按钮点不到。
• 跟 Agent 沟通时你说那个把页面盖住的弹窗，对方要确认是不是模态框。

可以直接对 Agent 说

「点击删除后弹出一个确认框，背景变暗且点不动，框里写确定要删除这条记录吗，下面放取消和确认删除两个按钮，按键盘上的退出键等同于取消。」

「这个弹窗内容在小屏手机上会超出屏幕，帮我把内容区做成可滚动，底部按钮始终吸在弹窗底部可见。」

「弹窗打开后要把键盘焦点移进去并锁在里面，关掉之后焦点要还回原来那个触发的按钮，方便用键盘操作的用户。」