活动弹窗需兼顾可见性、无干扰、高并发，应优先用语义化 元素并兼容 safari；结构上遮罩与弹窗须为兄弟节点；防重复弹出需服务端控制+sessionstorage兜底；定位必用 position: fixed。
活动弹窗不是“一弹了之”，核心是既要用户看到，又不能干扰关键操作，还得扛住流量高峰。用 alert() 或 window.open() 基本等于放弃体验和转化率。
用 dialog 元素做语义化活动弹窗，但必须处理 Safari 兼容性
现代浏览器中，<dialog></dialog> 是最干净的方案：自动模态、Esc 关闭、焦点管理内置。但 Safari 15.4 之前不支持 showModal()，iOS 16.4 才完全落地。
- 检测是否可用：
typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype - 不支持时，别删掉
<dialog></dialog>标签——用 JS 补上遮罩层、inert属性、焦点锁定逻辑，而不是降级为div重写整套结构 -
::backdrop伪元素能直接控制遮罩样式，比手动写#mask更简洁；但旧版 Edge 不识别，需 fallback 到内联遮罩div - 活动弹窗常带倒计时或表单，务必在
showModal()后立刻调用dialog.querySelector('input, button')?.focus()，否则键盘党无法操作
点击遮罩关闭时，为什么内容区也跟着关了？
这是事件冒泡+结构嵌套导致的典型误关。很多实现把弹窗内容直接塞进遮罩 div 里，结果点击按钮也会触发遮罩的 click 监听器。
- 正确结构：遮罩层和弹窗容器是兄弟节点，不是父子关系 —— 都挂载在
body下，各自独立定位 - 监听遮罩点击时，必须严格判断目标：
overlay.addEventListener('click', e => { if (e.target === overlay) closeDialog(); }) - 移动端要加
touch-action: none到遮罩层，防止双击缩放误触发 - 别用
overlay.onclick = closeDialog，它无法区分点击来源，无障碍场景下会破坏屏幕阅读器导航流
活动弹窗怎么防重复弹出？别只靠 localStorage
用户刷新页面、换设备、清缓存后，仅靠 localStorage 记录“已展示”会失效。真实场景需要组合策略。
- 服务端下发弹窗开关状态（如 HTTP Header 或 JSON API 返回
shouldShowPopup: true），客户端只负责渲染，不决策 - 前端兜底用
sessionStorage控制单会话内最多弹 1 次，避免用户反复 F5 触发 - 对首屏弹窗，加一个最小延迟（如
setTimeout(show, 800)），避开 DOM 尚未就绪或 SSR 渲染抖动 - 禁止在
scroll或resize回调里触发弹窗 —— 滚动惯性可能触发数十次，直接卡死主线程
为什么用 position: fixed 而不是 absolute？
活动弹窗必须锚定视口，滚动时不能偏移。用 absolute 依赖父容器定位上下文，一旦父级有 transform、perspective 或 filter，就会创建新的 containing block，导致居中错位甚至消失。
- 固定写法：
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) - 别用
margin: auto—— 在fixed下部分 Android WebView 表现异常 - 高度自适应时，用
max-height: 80vh; overflow-y: auto，而不是height: 100%，否则长内容会撑爆屏幕且无滚动条 - 遮罩层必须设
inset: 0（或top/right/bottom/left: 0），不能只写width: 100%; height: 100%，否则在 zoom 缩放时可能漏边
真正难的不是让弹窗出来，而是让它在各种设备、各种网络条件、各种用户行为路径下都“刚好出现，又刚好不碍事”。焦点管理、滚动锁定、服务端协同、降级逻辑——这些细节堆起来，才是活动弹窗的水下冰山。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
