Éliminez les pop-ups d'inscription et de newsletter avant qu'ils n'apparaissent
Vous êtes à trois paragraphes d'un article quand une boîte glisse sur l'écran pour quémander votre adresse e-mail. Les pop-ups de newsletter sont l'interruption la plus prévisible du web — et la plus facile à supprimer définitivement.
Comment fonctionnent les pop-ups d'inscription
La plupart des pop-ups se déclenchent de trois façons : après un délai, après un certain défilement, ou sur « intention de sortie » lorsque votre curseur file vers la barre d'onglets. Quel que soit le déclencheur, le résultat est le même élément du DOM — un conteneur modal plus un fond sombre. Masquez les deux et l'interruption disparaît.
Recette 1 : masquer les conteneurs modaux courants
Les widgets de pop-up réutilisent un petit ensemble de noms de classes. Cette règle couvre les principaux ainsi que le fond en une seule passe.
/* Nettoyage des modaux newsletter / inscription */
[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;
}
/* Réactiver la page derrière le modal */
body {
overflow: auto !important;
padding-right: 0 !important;
}Ce padding-right: 0 compte : beaucoup de scripts de modaux ajoutent un padding à droite du body pour compenser une barre de défilement masquée, laissant un vilain espace une fois le modal disparu.
Recette 2 : déjouer les superpositions à intention de sortie
Les pop-ups à intention de sortie guettent le départ de votre souris hors de la zone d'affichage. Ils vivent presque toujours dans un conteneur fixe plein écran avec un z-index très élevé. Vous pouvez les cibler par cette signature.
/* Tout ce qui est fixe et plein écran au-dessus de la page */
div[style*="position: fixed"][style*="z-index"] {
display: none !important;
}
/* Noms de classes courants d'intention de sortie */
[class*="exit-intent"], [class*="exit-popup"],
[data-popup-trigger="exit"] {
display: none !important;
}Utilisez le premier sélecteur avec prudence — certains sites placent une interface légitime dans des conteneurs fixes. Si une page casse, restreignez la règle à ce seul domaine.
Recette 3 : une règle JS qui bloque les pop-ups à la source
Le CSS masque les pop-ups après leur affichage. Le JavaScript peut les empêcher de s'afficher du tout en neutralisant les minuteries et les écouteurs de défilement qui les déclenchent.
// Désactiver les pop-ups temporisés en bloquant les longs timeouts
const realTimeout = window.setTimeout;
window.setTimeout = function (fn, delay, ...rest) {
if (delay > 1500) return 0; // ignorer les délais suspicieusement longs
return realTimeout(fn, delay, ...rest);
};
// Supprimer les modaux qui passent encore
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 });Bloquer les timeouts de plus de 1,5 seconde élimine la plupart des pop-ups différés tout en laissant tranquilles les animations normales de la page. Ajustez le seuil si un site dépend de minuteries lentes.
Recette 4 : empêcher la page de se verrouiller
Même avec le pop-up masqué, certains scripts gèlent le défilement en ajoutant une classe à l'élément <html>. Retirez-la et restaurez le mouvement.
// Forcer le déverrouillage du défilement
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';Configurez-le une fois, naviguez partout
Appliquez les recettes CSS avec un motif d'URL large comme *://*/* et gardez la règle JS pour les rares sites qui ont besoin de plus de force. Comme JustZix exécute vos règles avant que la page ne finisse de s'afficher, les pop-ups bien construits ne clignotent même jamais à l'écran.
- Commencez par la Recette 1 globalement.
- Ajoutez la Recette 3 seulement sur les sites tenaces.
- Mettez en liste blanche tout site où un « modal » est quelque chose dont vous avez réellement besoin.
Étapes suivantes
Installez depuis la page télécharger JustZix et explorez le catalogue d'exemples prêts à l'emploi pour plus de snippets. Les bannières cookies sont des cousines proches des pop-ups — éliminez-les aussi avec notre guide sur /fr/blog/hide-cookie-walls-and-consent-popups. Avec les deux règles enregistrées, le web se lit comme il se doit : rien que le contenu.
Notez cet article
Aucune note — soyez le premier.