Newsletter- und Anmelde-Popups beseitigen, bevor sie erscheinen
Sie sind drei Absätze in einen Artikel vertieft, als sich ein Kasten über den Bildschirm schiebt und um Ihre E-Mail-Adresse bettelt. Newsletter-Popups sind die vorhersehbarste Unterbrechung im Web — und die am leichtesten dauerhaft zu entfernende.
Wie Anmelde-Popups funktionieren
Die meisten Popups werden auf eine von drei Arten ausgelöst: nach einer Verzögerung, nachdem Sie eine bestimmte Strecke gescrollt haben, oder bei "Exit Intent", wenn Ihr Cursor zur Tab-Leiste rast. Was auch immer der Auslöser ist, das Ergebnis ist dasselbe DOM-Element — ein modaler Container plus ein dunkler Hintergrund. Blenden Sie beide aus, und die Unterbrechung ist weg.
Rezept 1: Häufige modale Container ausblenden
Popup-Widgets verwenden eine kleine Auswahl an Klassennamen wieder. Diese Regel deckt die großen und den Hintergrund in einem Durchgang ab.
/* Newsletter- / Anmelde-Modal-Bereinigung */
[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;
}
/* Die Seite hinter dem Modal wieder aktivieren */
body {
overflow: auto !important;
padding-right: 0 !important;
}Das padding-right: 0 ist wichtig: Viele Modal-Skripte fügen dem Body rechten Innenabstand hinzu, um eine ausgeblendete Bildlaufleiste auszugleichen, was eine hässliche Lücke hinterlässt, sobald das Modal weg ist.
Rezept 2: Exit-Intent-Overlays besiegen
Exit-Intent-Popups warten darauf, dass Ihre Maus den Anzeigebereich verlässt. Sie leben fast immer in einem festen, bildschirmfüllenden Container mit einem sehr hohen z-index. Sie können sie über diese Signatur anvisieren.
/* Alles Feste und Bildschirmfüllende über der Seite */
div[style*="position: fixed"][style*="z-index"] {
display: none !important;
}
/* Häufige Exit-Intent-Klassennamen */
[class*="exit-intent"], [class*="exit-popup"],
[data-popup-trigger="exit"] {
display: none !important;
}Verwenden Sie den ersten Selektor mit Bedacht — manche Seiten platzieren legitime UI in festen Containern. Wenn eine Seite kaputtgeht, schränken Sie die Regel nur auf diese Domain ein.
Rezept 3: Eine JS-Regel, die Popups an der Quelle blockiert
CSS blendet Popups aus, nachdem sie gerendert wurden. JavaScript kann verhindern, dass sie überhaupt gerendert werden, indem es die Timer und Scroll-Listener neutralisiert, die sie auslösen.
// Zeitgesteuerte Popups durch Blockieren langer Timeouts deaktivieren
const realTimeout = window.setTimeout;
window.setTimeout = function (fn, delay, ...rest) {
if (delay > 1500) return 0; // verdächtig lange Verzögerungen überspringen
return realTimeout(fn, delay, ...rest);
};
// Modale entfernen, die trotzdem durchrutschen
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 });Das Blockieren von Timeouts, die länger als 1,5 Sekunden sind, beseitigt die meisten verzögerten Popups, während normale Seitenanimationen unberührt bleiben. Passen Sie den Schwellenwert an, wenn eine Seite auf langsame Timer angewiesen ist.
Rezept 4: Verhindern, dass die Seite sich sperrt
Selbst bei ausgeblendetem Popup frieren manche Skripte das Scrollen ein, indem sie dem <html>-Element eine Klasse hinzufügen. Entfernen Sie sie und stellen Sie die Bewegung wieder her.
// Scrollen erzwungen entsperren
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';Einmal einstellen, überall surfen
Wenden Sie die CSS-Rezepte mit einem breiten URL-Muster wie *://*/* an und behalten Sie die JS-Regel für die wenigen Seiten, die extra Kraft brauchen. Da JustZix Ihre Regeln ausführt, bevor die Seite fertig gezeichnet ist, blitzen gut gebaute Popups nie auch nur auf dem Bildschirm auf.
- Beginnen Sie mit Rezept 1 global.
- Fügen Sie Rezept 3 nur auf hartnäckigen Seiten hinzu.
- Setzen Sie jede Seite auf die Whitelist, bei der ein "Modal" etwas ist, das Sie tatsächlich brauchen.
Nächste Schritte
Installieren Sie von der Seite JustZix herunterladen und erkunden Sie den Katalog fertige Beispiele für weitere Snippets. Cookie-Banner sind ein naher Verwandter von Popups — beseitigen Sie auch diese mit unserer Anleitung unter /de/blog/hide-cookie-walls-and-consent-popups. Mit beiden gespeicherten Regeln liest sich das Web, wie es sollte: nur der Inhalt.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.