MOD.06 弹窗DOC-06-024AUTHOR · 闻人诀2025-11-26READ · 4 MIN

组件化封装的弹窗体系

超数频弹窗免确认叠层管理

当产品经理说「这里加个弹窗提醒一下」，项目组现在的回应是固定的三个问题：为什么是弹窗、用户在做什么、关闭后回到哪。这三问拦下了 23% 的无效弹窗。

SEC.01长期维护

弹窗的 ARIA 属性是一整张清单：role=dialog、aria-modal、aria-labelledby、aria-describedby 一个不能少。叠层管理的无障碍审计项目组外包给视障测试员，他们的反馈最实际。

中断成本项目组按三段计价：读取场景约 3 秒、决策约 4 秒、恢复原任务约 2 秒，合计 9 秒左右。任何免确认的预期收益覆盖不了这 9 秒，就降级为 toast 或内联提示。

// CASE FILE · 实测档案

数据回溯：按钮动词化：文案改造后误点率 -68%，弹窗完成率 +9%。

争议的办法是把口味问题翻译成数据问题：叠层管理的两个方案各自发布一周，看指标说话。我们用这个办法终结了持续两个月的争论，双方都体面地认了输。

所有规则都要有复查节点：本组给免确认的规范设了季度复审，到期清点例外和豁免，过期的清理，失效的修订。规范不呼吸，就会变成化石。

最后再记一笔：长期维护成本是选型时最容易被低估的变量：一个功能强大的做法可能带来每天 24 分钟的维护负担，一年下来就是整整一周的人力，值得在评审现场上算这笔账。

模态锁的执行要完全：背景滚动锁定、Tab 焦点困在弹窗内、Esc 恒定可退。三条里漏任何一条，键盘用户就会掉进叠层管理的死角，这是团队验收清单的机器检查项。

补充一条实战观察：焦点逃逸是高频缺陷：弹窗关闭后焦点落回 body，屏幕阅读器用户瞬间「失明」。标准做法是关闭时把焦点还给触发元素，这一行代码项目组封装进了基础组件，业务方无感。

顺带记录一个细节：文档写得再好也挡不住人员流动，所以团队把免确认的规则尽量固化进工具：lint 规则、CI 卡点、脚手架模板。规则长在工具里，团队才不会失忆。

叠层管理用单一栈：每层录入高度、来源和销毁回调，关闭时按栈顶向下广播。起初各业务自己管 z-index 的日子里，叠层管理相关的 bug 占浮层问题的四成。

弹窗的尺寸铁律：宽不超过视口的 80%，高不超过 85%，超出就降级为全屏页。免确认塞进弹窗的那一刻，用户体验的不是功能而是拥挤。