在新闻订阅和注册弹窗出现前就干掉它们
你读到一篇文章的第三段,一个方框滑过屏幕乞求你的邮箱。新闻订阅弹窗是网络上最可预测的打断——也是最容易永久移除的。
注册弹窗如何工作
大多数弹窗以三种方式之一触发:延迟一段时间后、滚动一定距离后,或者当你的光标冲向标签栏时的"退出意图"。无论触发方式如何,结果都是同一个 DOM 元素——一个模态容器加一个暗色背景。把两者都隐藏,打断就消失了。
配方 1:隐藏常见的模态容器
弹窗组件复用一小套类名。这条规则一次就覆盖了主要的那些以及背景。
/* 新闻订阅 / 注册模态清理 */
[class*="newsletter"], [class*="signup-modal"],
[class*="email-capture"], [class*="subscribe-popup"],
[id*="popup"], [class*="popup-overlay"],
.modal[role="dialog"] {
display: none !important;
visibility: hidden !important;
}
/* 重新启用模态背后的页面 */
body {
overflow: auto !important;
padding-right: 0 !important;
}padding-right: 0 很重要:许多模态脚本会给 body 加上右内边距以补偿隐藏的滚动条,模态消失后会留下一道难看的间隙。
配方 2:击败退出意图遮罩
退出意图弹窗会监听你的鼠标离开视口。它们几乎总是位于一个固定的、占满视口的容器中,带有极高的 z-index。你可以按这个特征定位。
/* 任何固定且全屏覆盖在页面之上的元素 */
div[style*="position: fixed"][style*="z-index"] {
display: none !important;
}
/* 常见的退出意图类名 */
[class*="exit-intent"], [class*="exit-popup"],
[data-popup-trigger="exit"] {
display: none !important;
}谨慎使用第一个选择器——有些网站会把合法的 UI 放在固定容器里。如果某个页面坏了,就把规则收窄到那个域名。
配方 3:从源头阻断弹窗的 JS 规则
CSS 在弹窗渲染之后隐藏它。JavaScript 可以通过废掉触发弹窗的计时器和滚动监听器,让它根本不渲染。
// 通过拦截长超时来禁用定时弹窗
const realTimeout = window.setTimeout;
window.setTimeout = function (fn, delay, ...rest) {
if (delay > 1500) return 0; // 跳过可疑的长延迟
return realTimeout(fn, delay, ...rest);
};
// 移除仍然漏过来的模态
new MutationObserver(() => {
document.querySelectorAll('[class*="modal"], [class*="popup"]')
.forEach(el => {
if (el.offsetHeight > 100 && el.offsetHeight < 700) {
el.remove();
}
});
}).observe(document.documentElement, { childList: true, subtree: true });拦截超过 1.5 秒的超时能干掉大多数延迟弹窗,同时不影响正常的页面动画。如果某个网站依赖慢速计时器,可以调整阈值。
配方 4:阻止页面被锁定
即便弹窗已被隐藏,有些脚本仍会通过给 <html> 元素加类来冻结滚动。把它去掉并恢复移动。
// 强制解锁滚动
const html = document.documentElement;
['no-scroll', 'modal-open', 'overflow-hidden', 'fixed'].forEach(c => {
html.classList.remove(c);
document.body.classList.remove(c);
});
document.body.style.overflow = 'auto';设置一次,处处畅游
用像 *://*/* 这样宽泛的 URL 模式应用这些 CSS 配方,并为少数需要额外强力的网站保留 JS 规则。因为 JustZix 在页面绘制完成前就运行你的规则,精心制作的弹窗连在屏幕上闪一下都不会。
- 先在全局应用配方 1。
- 只在顽固的网站上添加配方 3。
- 把任何"模态"确实是你需要的东西的网站加入白名单。
下一步
从下载 JustZix 页面安装,并浏览现成示例目录获取更多代码片段。Cookie 横幅是弹窗的近亲——用我们位于/zh/blog/hide-cookie-walls-and-consent-popups 的指南也把它们清掉。保存好两条规则后,网络就会以它应有的样子呈现:只有正文。
为这篇文章评分
暂无评分 — 成为第一个。