真正能落地的延时弹窗必须绑定在首个可预测的用户交互之后，如点击主按钮、表单提交或滚动过首屏，并配合localStorage控制冷却期与展示频次，避免重复骚扰。
setTimeout 触发弹窗是最直接但最易被拦截的方式
页面加载后用 setTimeout 延迟几秒调用 showPopup()，代码简洁，但现代浏览器（Chrome 88+、Safari 16.4+、Edge 90+）会直接阻止非用户激活上下文下的弹窗——即页面刚打开时自动执行的 JS 不算“用户激活”，showModal() 抛 Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document.，document.getElementById('popup').style.display = 'block' 也可能被广告拦截器静默屏蔽。
真正能落地的延时逻辑必须绑定在**首个可预测的用户交互之后**，比如：
- 用户点击首屏主按钮（如“立即领取”“开始体验”）
- 表单提交成功回调（
form.addEventListener('submit', handler)） - 用户滚动超过首屏（
window.scrollY > window.innerHeight）且未触发过
用 localStorage 控制弹窗冷却期和展示频次
不加限制的延时弹窗等于骚扰。必须记录状态并设冷却时间，否则用户刷新页面又弹一次，跳出率飙升。
推荐写法：
- 首次弹出前检查：
localStorage.getItem('popup_shown_at') - 若存在且距今
- 弹出后写入：
localStorage.setItem('popup_shown_at', Date.now().toString()) - 关闭按钮也应触发同操作，避免用户点 X 后刷新又弹
注意：不要用 cookie 替代，移动端 Safari 的 ITP 策略会清空第三方 cookie，且 localStorage 更易读写。
遮罩层和弹窗体的 z-index 与定位必须手动硬编码
依赖 CSS 自动堆叠顺序或 relative/absolute 组合极易被导航栏、固定 header、其他广告位盖住。尤其微信内置浏览器、旧版安卓 WebView 对 z-index 解析不稳定。
安全写法：
- 遮罩层：
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; - 弹窗内容：
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; - 移动端补充：
touch-action: manipulation到弹窗容器，防 300ms 延迟导致“点两下才关”
iOS Safari 在 zoom 场景下 transform: translate() 可能偏移，若遇到可改用 inset: 0; margin: auto;（需确认目标浏览器支持 inset）。
弹窗打开/关闭时必须控制 body 滚动和 scrollY 位置
弹窗显示时若不禁用滚动，用户仍可拖动背景页，视觉割裂；关闭后若不恢复原位置，用户会回到页面顶部，体验断裂。
关键动作：
- 打开前存档：
const savedY = window.scrollY; document.body.style.overflow = 'hidden'; - 关闭后还原：
document.body.style.overflow = '';+window.scrollTo(0, savedY); - 别用
document.body.scrollTop或document.documentElement.scrollTop，跨浏览器行为不一致
这个细节在 iOS Safari 和微信 WebView 中尤为关键——它们对 overflow: hidden 的实现更激进，容易连带禁用整个页面 touchmove，所以必须搭配 savedY 手动恢复。
实际最难的不是“怎么让广告弹出来”，而是“怎么让它既合规又不被拦、既准时又不突兀”。所有自动逻辑都得绕过 UA 的用户激活检测，而唯一确定的锚点，就是那个用户亲手按下去的按钮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
