广告弹窗必须绑定用户真实交互触发，否则必被浏览器拦截；需用 fixed 遮罩、动态居中、禁滚动并保存位置，动画用 keyframes，倒计时用 raf，关闭走统一清理函数。

window.open() 在广告场景下基本不可用，别试了。现代浏览器对非用户主动触发的弹窗拦截极其严格，广告类自动弹出（比如页面加载 3 秒后、滚动到某位置、或 fetch 完成后）几乎 100% 被静默屏蔽，控制台只报 Blocked opening 'xxx' in a new window because the request was made without user activation.，连提示都没有。

用 dialog 做广告弹窗？先看兼容性再动手

<dialog></dialog> 语义清晰、自带 backdrop 和焦点锁定，但广告弹窗最常需要的“自动延时弹出”和“强制展示”它根本不支持——showModal() 必须由用户点击触发，否则抛错 Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document.。

• Safari 直到 16.4 / macOS 13.3 才完整支持 showModal()，iOS 15.x 及更早版本只能用 show()（非模态，背景仍可点）
• Android WebView（尤其旧版）不支持 dialog::backdrop 伪元素，自定义遮罩色无效，只能靠 JS 插入外层 <div class="backdrop"> <li>想禁用点击 backdrop 关闭？别在 <code>click 里 event.stopPropagation() —— 这会同时废掉 Escape 键和屏幕阅读器支持；真要锁死，应在 close 事件里 event.preventDefault() 并弹二次确认

自己写 div 弹窗，关键不是“怎么显”，而是“怎么不被拦”

广告弹窗的核心矛盾不是技术实现，而是浏览器干预策略。所有“自动触发”逻辑必须绕过 UA 的用户激活检测（User Activation），而唯一可靠路径是：把首次弹出绑定在用户**真实、可预测、不可跳过的交互点**上，比如“首屏大按钮点击”或“表单提交成功后”。


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• 遮罩层必须用 position: fixed + z-index: 1000，内容层 z-index: 1001，避免被导航栏、广告位等覆盖
• 居中别用 top: 50%; left: 50%; transform: translate(-50%, -50%) —— 在 iOS Safari 某些 zoom 场景下会偏移，改用 margin: auto + inset: 0（需检查兼容性）或 JS 动态计算
• 移动端必须加 touch-action: manipulation 到弹窗容器，防止 300ms 点击延迟导致“点两下才关”
• 禁止页面滚动：打开时设 document.body.style.overflow = 'hidden'，关闭时恢复；但记得保存原始 scrollY，关闭后 window.scrollTo(0, savedY)，否则用户会丢失位置

广告弹窗的隐藏雷区：动画、倒计时、关闭逻辑

广告弹窗不是功能组件，是转化漏斗节点，很多细节直接决定跳出率。

• 动画别用 transition 做入场 —— 低端机卡顿明显，优先用 @keyframes + animation，并加 will-change: transform
• 倒计时关闭（如“5秒后自动关闭”）必须用 requestAnimationFrame 驱动，不用 setTimeout，避免后台标签页中定时器失准
• 关闭按钮的 onclick 不要直接写 style.display = 'none'，应统一走 hidePopup() 函数，里面做清理：移除事件监听、清除定时器、恢复 body 滚动、重置焦点
• 如果弹窗含 iframe（比如嵌第三方广告），务必加 sandbox="allow-scripts allow-same-origin"，否则某些广告脚本会因权限不足崩溃

广告弹窗真正的难点从来不在“怎么让它出来”，而在于“怎么让它出来时不被拦截、不卡顿、不打断用户、关得干脆、且数据能回传”。自动触发路径越激进，失败率越高；把触发时机锚定在用户确定行为上，反而转化更稳。