HTML5中加弹窗需用div模拟遮罩层与内容区，关键在防点击穿透、ESC关闭及可访问性：遮罩层设tabindex="-1"并focus()、z-index≥1000、监听escape和遮罩点击（排除内容区）、关闭后恢复body滚动。
HTML5 页面中怎么加弹窗提示
直接用 不依赖框架、兼容性好、体积小。关键点不是“怎么显示”，而是“怎么避免点击穿透”和“按 ESC 关闭”。 它们会阻塞 JS 执行主线程，用户无法切换标签页、无法复制网页文字、无法触发其他交互 —— 在现代 Web 应用里基本等同于反模式。尤其在单页应用（SPA）中，调用 立即学习“前端免费学习笔记（深入）”； 如果项目已用 Vue/React，优先选对应生态的轻量方案（如 Vue 的 真正难的不是“加弹窗”，而是让弹窗不打断用户流、不破坏可访问性、不拖慢首屏、不和现有 CSS 冲突。很多团队花三天调 alert() 最快，但体验差、无法定制；真要加弹窗，得自己写或引入轻量组件。原生 HTML5 不提供「弹窗组件」，所谓「加弹窗」本质是：用 用原生 JS 实现一个最小可用弹窗
tabindex="-1" 并调用 .focus()，否则键盘焦点会留在背景页面z-index 要高于所有内容（建议 ≥ 1000），且需设 position: fixed
keydown 事件捕获 Escape 键，同时监听遮罩层点击（但排除弹窗内容区）document.body.style.overflow = ''
为什么不用
window.confirm() 或 prompt()
confirm() 可能导致路由跳转中断、状态丢失，甚至被浏览器标记为「不响应」。
alert()/confirm() 在 iOS Safari 中默认禁用（需用户手动允许）第三方弹窗库选型避坑要点
vue-js-modal、React 的 @headlessui/react）。纯静态页则推荐 shepherd.js（引导类）或手写 20 行代码更可控。
jQuery 本身已进入维护模式document 直接访问会报错aria-modal="true" 和 role="dialog" 是否自动注入，这关系到读屏软件兼容性z-index 层级和 transform 触发重排，比写业务逻辑还累。
