HTML5弹窗代码大全及使用方法

用原生 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></p>

为什么不用 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 触发重排，比写业务逻辑还累。

本篇关于《HTML5弹窗代码大全及使用方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！