推荐使用 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 行为（比如搜索框清空）
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
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），原生函数完全不支持
弹窗真正的难点不在“显示”，而在焦点管理、滚动锁定、键盘导航闭环和屏幕阅读器兼容——这些细节漏掉一个，用户就会卡住或感知不到弹窗存在。
