真正可用的弹窗必须包含遮罩层、弹窗容器和可聚焦的内部节点三部分；遮罩层需独立于弹窗容器，弹窗容器须设tabindex="-1"，关闭按钮或内容区须可聚焦，显隐必须用display: none而非visibility或opacity，且需requestanimationframe后手动focus。
弹窗不是“加个 div 再 display: block”就完事的，真正卡住人的永远是焦点管理、滚动锁定、遮罩点击穿透、iOS 键盘顶起这些细节。不处理好，用户一操作就跳出预期，尤其是表单类弹窗。
弹窗 HTML 结构必须包含哪些元素
一个可用的弹窗至少得有三块：遮罩层、弹窗容器、可聚焦的内部节点。缺一不可。
-
div.overlay必须独立存在，不能嵌套在弹窗div里——否则 iOS Safari 点击遮罩无响应 -
div.modal要带tabindex="-1"，否则首次打开时无法用.focus()捕获键盘焦点，Tab 键会直接跳到背景页 - 关闭按钮（如
button.close）或内容区要能接收焦点，否则屏幕阅读器无法识别，也违背 WCAG 2.1 标准 - 别用
visibility: hidden或opacity: 0控制显隐——它们仍占文档流，且焦点可穿透
为什么 display: none 是最安全的显隐方式
它彻底移出渲染树，不占空间、不接受事件、不参与 tab 顺序，是唯一能同时解决视觉隐藏 + 交互隔离 + 可访问性屏蔽的方案。
-
display: none下，document.activeElement不会意外落在弹窗内，避免关闭后焦点丢失 - 对比
transform: scale(0)或height: 0：这些仍触发 layout，可能引发重排，且某些浏览器（尤其旧版 Edge）对focus()行为不一致 - 注意：切换
display后需手动调用requestAnimationFrame(() => modal.focus())，否则 Safari 可能延迟聚焦
移动端弹窗的两个硬伤及修复点
iOS 键盘弹出时把输入框顶出可视区、安卓软键盘遮挡 submit 按钮——这不是 bug，是浏览器默认行为，但能绕过。
- 给
input绑定focus事件，触发后立即执行el.scrollIntoView({block: "nearest"}) - 别用
scrollIntoView({behavior: "smooth"})：iOS 15+ 对该参数支持不稳定，容易失效 - 提交按钮必须放在
form底部且有足够 bottom padding，否则软键盘会盖住它；测试时真机连上 devtools 查看实际 viewport 高度变化 - 遮罩层
div.overlay的z-index必须高于弹窗本身——部分安卓 WebView 在 z-index 计算上有偏差，建议设为9999而非999
淘宝 widget 弹窗的 data-config 对齐陷阱
淘宝装修用的 J_TWidget 弹窗依赖 data-widget-config 中的 align 配置，但 points 值极易写错导致定位漂移。
-
points: ["tl", "tr"]表示“触发元素左上角”对齐“弹窗右上角”，不是直觉上的“左对齐” -
offset是数组形式：[x, y]，正数向右/下偏移，负数向左/上——但淘宝解析器对负值兼容性差，建议只用正 offset + 调整points - 如果触发元素是
span这类 inline 元素，必须先加display: inline-block，否则node定位基准失效 - 不要在
data-widget-config里写 JSON 字符串，要用合法 JS 对象字面量，否则淘宝解析器静默失败
弹窗真正的复杂点不在结构本身，而在于它和页面其他状态的耦合：滚动被锁住时用户想滚页面怎么办？焦点跳转后屏幕阅读器读什么？Esc 关闭后要不要恢复原来按钮的 focus？这些没处理，再漂亮的动画也只是半成品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
