浏览器拦截非用户主动触发的window.open()，因其判定为广告或恶意行为；必须在真实点击事件同步回调中调用，否则返回null并静默报错“Blocked opening...without user activation”。
浏览器会直接拦截非用户触发的弹窗广告，window.open() 在现代环境下基本失效，必须用 div + CSS + JavaScript 手动实现，并严格绑定真实点击行为。
为什么不能用 window.open() 做广告弹窗
所有主流浏览器（Chrome、Firefox、Safari、Edge）对非用户主动激活（User Activation）的弹窗拦截率接近 100%。控制台只会静默输出：Blocked opening 'xxx' in a new window because the request was made without user activation.。即使加了延时、滚动监听或 fetch 完成后触发，也毫无例外。
-
window.open()只适合跳转型外链（如“立即下载”按钮），且必须在click回调内同步调用 - 广告类弹窗必须是页面内浮层（
position: fixed），否则无法控制样式、动画、遮罩和关闭逻辑 - 移动端 WebView（尤其 Android 旧版）对
dialog兼容极差，showModal()在 iOS 15.x 及更早版本根本不可用
基础 HTML 结构怎么写才不被拦
结构本身不决定是否被拦，但错误写法会让后续 JS 控制失效。关键点是：初始隐藏、语义化、可访问性预留。
- 遮罩层用
<div id="ad-backdrop"></div>，不要用<dialog></dialog>—— 它不支持自动弹出，且showModal()报错The element is not in a Document. - 弹窗容器加
aria-hidden="true"和tabindex="-1"，JS 显示时同步设aria-hidden="false" - 关闭按钮必须有
role="button"或原生<button></button>，否则键盘用户无法聚焦 - 别把弹窗 HTML 写在
里；DOM 未就绪时操作document.getElementById()会返回null
CSS 居中和禁滚动的坑在哪
看似简单的居中和锁滚动，实际在 iOS Safari、Zoom 模式、WebView 下极易出问题。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 避免用
top: 50%; left: 50%; transform: translate(-50%, -50%)—— iOS Safari 缩放后会偏移，改用inset: 0; margin: auto;（需检查 Chrome 94+/Safari 15.4+ 兼容性）或 JS 动态计算top/left - 禁滚动不能只靠
overflow: hiddenonbody：必须先存document.documentElement.scrollTop或window.scrollY，关闭时手动window.scrollTo(0, savedY)，否则用户回到顶部丢失阅读位置 - 遮罩层
z-index至少设为1000，弹窗内容层至少1001，否则可能被导航栏、广告位等覆盖 - 移动端务必加
touch-action: manipulation到弹窗根元素，否则点击关闭按钮可能触发 300ms 延迟，导致“点两下才关”
JS 触发逻辑必须满足的三个硬条件
这是能否成功弹出的分水岭，缺一不可。
- 必须绑定在**真实、不可跳过的用户点击事件**上，例如首屏大按钮、表单提交后的成功回调、商品加入购物车后确认按钮 —— 不是
setTimeout、scroll、IntersectionObserver或DOMContentLoaded - 弹窗显示代码必须在事件回调内**同步执行**，不能包在 Promise.then()、
requestAnimationFrame或异步函数里，否则 UA 认定为“非即时响应” - 首次显示前，确保
document.body已存在且样式已生效；推荐把 JS 放在前，或监听DOMContentLoaded，别用window.onload（等图片加载完才触发，太晚）
最易被忽略的是：广告弹窗不是纯前端技术活，而是浏览器策略对抗。所有“自动展示”需求，最终都得收敛到一个确定的用户点击入口点——没这个锚点，再漂亮的 CSS 动画和 JS 逻辑都白搭。
