如何实现弹窗效果

推荐使用 dialog 元素实现原生弹窗，语义清晰、自带模态行为与焦点管理；需用 showModal() 触发，确保其为 body 直接子元素以启用 backdrop，Safari 15.4+ 完整支持，旧版需补 dialog::backdrop 样式。

用 dialog 元素实现原生弹窗（推荐）

现代浏览器已普遍支持 dialog，它语义清晰、自带模态行为和焦点管理，无需额外 JS 控制遮罩层或 Esc 关闭逻辑。

• 必须配合 showModal() 方法触发显示，直接设 open 属性不会激活模态特性
• 点击 backdrop（灰色遮罩）默认关闭，但需确保 dialog 是 body 直接子元素，否则 backdrop 可能不渲染
• close() 触发 close 事件，可监听做清理；cancel 事件对应 Esc 或点击 backdrop
• Safari 15.4+ 才完整支持，旧版需加 dialog::backdrop 样式补全遮罩

<dialog id="myDialog">  <p>这是弹窗内容</p>  <button onclick="this.closest('dialog').close()">确定</button></dialog><p><button onclick="document.getElementById('myDialog').showModal()">打开弹窗</button>

用 CSS + JavaScript 模拟弹窗（兼容性兜底）

当需要支持 IE 或老版本 Safari 时，得手动控制显示/隐藏、遮罩、焦点锁、Esc 响应。

• 遮罩层必须用 position: fixed + z-index 高于主内容，且宽高设为 100vh/100vw
• 弹窗自身建议用 position: fixed 居中，避免受父容器 transform 或 overflow 影响偏移
• 焦点锁容易被忽略：打开后需用 focus() 聚焦到弹窗内第一个可交互元素，并拦截 Tab 键循环在弹窗内
• Esc 关闭需监听 keydown，但注意不要干扰输入框内的正常 Esc 行为（比如搜索框清空）

示例关键逻辑：

立即学习“前端免费学习笔记（深入）”；

function openModal() {  document.getElementById('overlay').style.display = 'block';  const modal = document.getElementById('customModal');  modal.style.display = 'block';  modal.querySelector('button, input')?.focus();}

阻止背景滚动但保留弹窗内滚动

用户打开弹窗后滚动页面，常导致背景内容位移，体验割裂。单纯给 body 加 overflow: hidden 会同时禁掉弹窗内长内容滚动。

• 正确做法是记录打开前 body 的 scrollTop，然后设 body { position: fixed; top: -scrollTop }
• 关闭时恢复 position: static 并重置 scrollTop
• 更稳妥的方案是只对 body 设 overflow: hidden，再给弹窗容器设 overflow-y: auto 和固定最大高度
• 注意移动端 Safari 对 position: fixed 的兼容问题，有时需加 touch-action: none 防止拖拽穿透

为什么不用 alert() / confirm()

这些是阻塞式原生对话框，会冻结整个页面 JS 执行，无法自定义样式、内容结构或动画，且在多数现代框架中已被视为反模式。

• alert() 无取消路径，无法与 React/Vue 的状态流集成
• 移动端 Safari 中 confirm() 的按钮文案不可控，中文环境可能显示英文
• 浏览器策略正在限制其调用频率，频繁触发会被静默降级或报 Blocked opening 'about:blank'... 错误
• 自定义弹窗可接入无障碍属性（如 aria-modal="true"、aria-labelledby），原生函数完全不支持

弹窗真正的难点不在“显示”，而在焦点管理、滚动锁定、键盘导航闭环和屏幕阅读器兼容——这些细节漏掉一个，用户就会卡住或感知不到弹窗存在。