Kill newsletter and signup popups before they appear
You are three paragraphs into an article when a box slides over the screen begging for your email. Newsletter popups are the most predictable interruption on the web — and the easiest to remove for good.
How signup popups work
Most popups are triggered one of three ways: after a delay, after you scroll a certain distance, or on "exit intent" when your cursor races toward the tab bar. Whatever the trigger, the result is the same DOM element — a modal container plus a dark backdrop. Hide both and the interruption is gone.
Recipe 1: Hide common modal containers
Popup widgets reuse a small set of class names. This rule covers the big ones and the backdrop in a single pass.
/* Newsletter / signup modal cleanup */
[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;
}
/* Re-enable the page behind the modal */
body {
overflow: auto !important;
padding-right: 0 !important;
}That padding-right: 0 matters: many modal scripts add right padding to the body to compensate for a hidden scrollbar, leaving an ugly gap once the modal is gone.
Recipe 2: Defeat exit-intent overlays
Exit-intent popups listen for your mouse leaving the viewport. They almost always live in a fixed, full-viewport container with a very high z-index. You can target by that signature.
/* Anything fixed and full-screen on top of the page */
div[style*="position: fixed"][style*="z-index"] {
display: none !important;
}
/* Common exit-intent class names */
[class*="exit-intent"], [class*="exit-popup"],
[data-popup-trigger="exit"] {
display: none !important;
}Use the first selector carefully — some sites put legitimate UI in fixed containers. If a page breaks, narrow the rule to that domain only.
Recipe 3: A JS rule that blocks popups at the source
CSS hides popups after they render. JavaScript can stop them from rendering at all by neutering the timers and scroll listeners that trigger them.
// Disable timed popups by blocking long timeouts
const realTimeout = window.setTimeout;
window.setTimeout = function (fn, delay, ...rest) {
if (delay > 1500) return 0; // skip suspiciously long delays
return realTimeout(fn, delay, ...rest);
};
// Remove modals that still slip through
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 });Blocking timeouts longer than 1.5 seconds kills most delayed popups while leaving normal page animations alone. Tune the threshold if a site relies on slow timers.
Recipe 4: Stop the page from locking
Even with the popup hidden, some scripts freeze scrolling by adding a class to the <html> element. Strip it and restore movement.
// Force-unlock scrolling
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';Set it once, browse everywhere
Apply the CSS recipes with a broad URL pattern like *://*/* and keep the JS rule for the few sites that need extra force. Because JustZix runs your rules before the page finishes painting, well-built popups never even flash on screen.
- Start with Recipe 1 globally.
- Add Recipe 3 only on stubborn sites.
- Whitelist any site where a "modal" is something you actually need.
Next steps
Install from the download JustZix page and explore the ready-made examples catalog for more snippets. Cookie banners are a close cousin of popups — clear those too with our guide at /en/blog/hide-cookie-walls-and-consent-popups. With both rules saved, the web reads the way it should: just the content.
Rate this post
No ratings yet — be the first.