HTML5中加弹窗需用div模拟遮罩层与内容区，关键在防点击穿透、ESC关闭及可访问性：遮罩层设tabindex="-1"并focus()、z-index≥1000、监听escape和遮罩点击（排除内容区）、关闭后恢复body滚动。
HTML5 页面中怎么加弹窗提示
直接用 alert() 最快，但体验差、无法定制；真要加弹窗，得自己写或引入轻量组件。原生 HTML5 不提供「弹窗组件」，所谓「加弹窗」本质是：用 <div> 模拟遮罩层 + 内容区 + 交互逻辑，再配合 CSS 动画和 JS 控制显隐。
用原生 JS 实现一个最小可用弹窗
不依赖框架、兼容性好、体积小。关键点不是“怎么显示”，而是“怎么避免点击穿透”和“按 ESC 关闭”。
- 必须给遮罩层设置
tabindex="-1"并调用.focus()，否则键盘焦点会留在背景页面 - 遮罩层
z-index要高于所有内容（建议 ≥ 1000），且需设position: fixed - 监听
keydown事件捕获Escape键，同时监听遮罩层点击（但排除弹窗内容区） - 关闭后记得恢复页面滚动：
document.body.style.overflow = ''
<!-- 弹窗结构（可放页面底部） -->
<div id="modal" tabindex="-1" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:1000;">
<div onclick="event.stopPropagation()" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:20px; border-radius:4px;">
<p>这是弹窗内容</p>
<button onclick="closeModal()">确定</button>
</div>
</div>
<p><script>
function openModal() {
document.getElementById('modal').style.display = 'block';
document.body.style.overflow = 'hidden';
document.getElementById('modal').focus();
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.body.style.overflow = '';
}
document.addEventListener('keydown', e => {
if (e.key === 'Escape' && document.getElementById('modal').style.display === 'block') {
closeModal();
}
});
document.getElementById('modal').addEventListener('click', e => {
if (e.target === document.getElementById('modal')) closeModal();
});
</script>为什么不用 window.confirm() 或 prompt()
它们会阻塞 JS 执行主线程，用户无法切换标签页、无法复制网页文字、无法触发其他交互 —— 在现代 Web 应用里基本等同于反模式。尤其在单页应用（SPA）中，调用 confirm() 可能导致路由跳转中断、状态丢失，甚至被浏览器标记为「不响应」。
-
alert()/confirm()在 iOS Safari 中默认禁用（需用户手动允许） - 无法设置宽高、字体、按钮文案、图标等任何样式
- 返回值只有布尔或字符串，没法传复杂对象或 Promise
- 自动化测试中极难 mock 和断言
第三方弹窗库选型避坑要点
如果项目已用 Vue/React，优先选对应生态的轻量方案（如 Vue 的 vue-js-modal、React 的 @headlessui/react）。纯静态页则推荐 shepherd.js（引导类）或手写 20 行代码更可控。
立即学习“前端免费学习笔记（深入）”；
- 警惕打包后体积超 10KB 的「弹窗库」——多数功能你根本用不到
- 检查是否依赖 jQuery：现代项目应避免，
jQuery本身已进入维护模式 - 确认是否支持 SSR（服务端渲染）：若用 Next.js/Nuxt，
document直接访问会报错 - 留意
aria-modal="true"和role="dialog"是否自动注入，这关系到读屏软件兼容性
真正难的不是“加弹窗”，而是让弹窗不打断用户流、不破坏可访问性、不拖慢首屏、不和现有 CSS 冲突。很多团队花三天调 z-index 层级和 transform 触发重排，比写业务逻辑还累。
