右下角广告弹窗必须由用户真实点击触发，否则100%被拦截；因现代浏览器强制要求window.open()或dialog.showModal()须在click等可信事件同步执行，异步调用（如setTimeout、fetch回调）均因缺失user activation而失败。
右下角广告弹窗不能靠自动触发，否则 100% 被浏览器拦截；必须绑定用户真实点击行为，比如“立即咨询”按钮或表单提交成功后。
为什么 window.open() 和自动 setTimeout 弹窗必失败
现代浏览器（Chrome、Edge、Firefox、Safari）对非用户激活（User Activation）的弹窗拦截极其严格。只要不是由 click、keydown 等可信任事件直接触发，window.open() 或 dialog.showModal() 都会静默失败，控制台只报：
Blocked opening 'xxx' in a new window because the request was made without user activation.
常见踩坑点包括：
- 页面加载完
setTimeout(showAd, 3000)—— 拦截 - 滚动到某位置后
showAd()—— 拦截 -
fetch()请求返回后调用弹窗 —— 拦截 - 用
dialog元素但没在 click 回调里调用showModal()—— 抛错Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document.'
右下角固定弹窗的 CSS 关键写法
定位必须用 position: fixed，但别用 top: 50%; left: 50%; transform: translate(-50%, -50%) 居中——iOS Safari 在缩放或横屏时容易偏移。右下角推荐写法：
立即学习“前端免费学习笔记（深入）”；
-
right: 20px+bottom: 20px是最稳的基准定位 - 避免用
z-index: 9999这类魔数，统一设为z-index: 1000（遮罩层）和z-index: 1001（内容层） - 移动端加
touch-action: manipulation到弹窗容器，防止 300ms 延迟导致“点两下才关” - 禁滚动不是只设
overflow: hidden，还要保存document.documentElement.scrollTop，关闭后手动window.scrollTo(0, savedY)
如何让右下角弹窗真正“可交互”且不被拦截
核心是把首次展示时机卡死在用户可预测、不可跳过的操作之后。例如：
- 用户点击
id="contact-btn"后立刻showAd() - 表单
submit成功回调里调用弹窗 - 客服入口按钮（如“在线客服”）点击后展示广告+聊天浮层
JavaScript 示例（不依赖框架）：
document.getElementById('contact-btn').addEventListener('click', () => {
const ad = document.getElementById('ad-popup');
ad.style.display = 'block';
document.body.style.overflow = 'hidden';
// 记录滚动位置
const savedY = window.scrollY;
ad.dataset.savedY = savedY;
});
document.getElementById('close-ad').addEventListener('click', () => {
const ad = document.getElementById('ad-popup');
ad.style.display = 'none';
document.body.style.overflow = '';
window.scrollTo(0, parseInt(ad.dataset.savedY || '0'));
});
注意：dialog 在 iOS 15.x 及更早版本不支持 showModal()，Android WebView 中 dialog::backdrop 伪元素常失效，建议优先用 div + 手动遮罩层。
最易被忽略的一点：广告弹窗不是“做出来就行”，而是“在哪一刻触发才不被拦”。所有自动逻辑都要砍掉，只保留用户点击后的同步响应——这才是当前浏览器策略下唯一可靠的路径。
