弹窗体验bug的根源在于未锁body滚动、缺遮罩层控制及焦点管理缺失；需用fixed全屏overlay、动态切换overflow、缓存加载数据、实现焦点循环并谨慎使用dialog元素。
点击按钮触发弹窗，但页面滚动条消失且背景还能点？
这是最常见的弹窗体验 bug：用 display: none 切换可见性时没锁 body 滚动，也没加遮罩层 z-index 和 pointer-events 控制。真正可用的弹窗必须同时满足三点：内容可聚焦、背景不可交互、页面不随弹窗滚动。
推荐做法是用一个固定定位的全屏 .modal-overlay 包裹弹窗内容，并在打开时给 加 overflow: hidden。注意别只靠 CSS，还要用 JS 在打开/关闭时同步控制：
- 打开弹窗前：保存当前
document.body.style.overflow值，再设为hidden - 关闭弹窗后：恢复原值（不是硬写
auto，否则页面原本是scroll就会出错） - 遮罩层必须有
pointer-events: auto，弹窗内部容器设pointer-events: auto，否则点击无效
弹窗内容从 API 加载，怎么避免空白闪动或重复请求？
直接在 onclick 里调 fetch() 再 innerHTML = data，会导致每次点击都重拉、没加载状态、错误无反馈。更稳妥的做法是把数据加载和 UI 渲染解耦。
建议用「懒加载 + 缓存」策略：
- 每个弹窗绑定唯一
data-id，首次点击时才发起请求，成功后缓存到 Map 或对象里：const cache = new Map() - 后续点击直接读缓存，同时检查是否已加载完成（
cache.has(id) && cache.get(id).status === 'loaded'） - 加载中显示骨架屏或 loading 文字，不要留白；失败时在弹窗内显示错误提示，而不是静默吞掉
- 如果详情页字段多，服务端最好支持按需字段（如
?fields=title,author,cover），避免传整条冗余数据
弹窗要支持键盘操作（Esc 关闭、Tab 焦点循环），但 Tab 一跳出就卡住？
纯靠 tabindex 不够。焦点逃逸是弹窗最常被忽略的可访问性问题——用户按 Tab 键到弹窗最后一个可聚焦元素后，焦点不该跳到 URL 栏或浏览器菜单，而应回到第一个弹窗元素。
关键在焦点管理逻辑：
- 弹窗打开后，立即用
element.focus()聚焦第一个可交互元素（比如关闭按钮或标题） - 监听
keydown，捕获Escape键并关闭弹窗 - 实现焦点循环：监听
focusin事件，在弹窗容器外触发时，手动把焦点切回第一个/最后一个元素（取决于 Shift 是否按下） - 所有可聚焦元素必须显式设置
tabindex="0"或使用原生可聚焦标签（<button></button>、<a href></a>），别依赖div+tabindex="0"混用
用 dialog 元素是不是就万事大吉了？
不是。<dialog></dialog> 是语义正确、自带 backdrop 和 showModal() 的现代方案，但它在 Safari 15.4 之前不支持，且部分行为仍需补丁。
实际落地要注意：
- 必须配合
::backdropCSS 手动设置遮罩样式，否则默认是全黑无透明度 - Safari 对
dialog[open]的样式继承有问题，建议所有弹窗样式都写在dialog内部，别依赖外部 class 继承 - 关闭后记得调用
dialog.close()，否则open属性不会自动变 false，影响下次showModal() - 如果项目需兼容 IE 或旧版 Chrome（dialog
最麻烦的往往不是怎么画框，而是怎么让弹窗不抢焦点、不漏数据、不崩键盘导航——这些细节不处理，用户一按 Esc 或连按几次 Tab，就立刻暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
