Elimina las ventanas emergentes de boletines y registro antes de que aparezcan
Llevas tres párrafos leídos de un artículo cuando una caja se desliza sobre la pantalla mendigando tu correo. Las ventanas emergentes de boletines son la interrupción más predecible de la web, y la más fácil de eliminar para siempre.
Cómo funcionan las ventanas emergentes de registro
La mayoría de las ventanas emergentes se activan de una de tres formas: tras un retardo, después de que te desplaces cierta distancia, o por "intención de salida" cuando el cursor corre hacia la barra de pestañas. Sea cual sea el desencadenante, el resultado es el mismo elemento del DOM: un contenedor modal más un fondo oscuro. Oculta ambos y la interrupción desaparece.
Receta 1: ocultar los contenedores modales comunes
Los widgets de ventanas emergentes reutilizan un pequeño conjunto de nombres de clase. Esta regla cubre los más grandes y el fondo en una sola pasada.
/* Limpieza de modales de boletín / registro */
[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;
}
/* Reactivar la página detrás del modal */
body {
overflow: auto !important;
padding-right: 0 !important;
}Ese padding-right: 0 importa: muchos scripts de modales añaden relleno a la derecha del body para compensar una barra de desplazamiento oculta, dejando un hueco feo una vez que el modal desaparece.
Receta 2: derrotar las superposiciones de intención de salida
Las ventanas emergentes de intención de salida escuchan cuando tu ratón abandona la ventana de visualización. Casi siempre viven en un contenedor fijo a pantalla completa con un z-index muy alto. Puedes apuntar a esa firma.
/* Cualquier cosa fija y a pantalla completa encima de la página */
div[style*="position: fixed"][style*="z-index"] {
display: none !important;
}
/* Nombres de clase comunes de intención de salida */
[class*="exit-intent"], [class*="exit-popup"],
[data-popup-trigger="exit"] {
display: none !important;
}Usa el primer selector con cuidado: algunos sitios colocan interfaz legítima en contenedores fijos. Si una página se rompe, limita la regla solo a ese dominio.
Receta 3: una regla JS que bloquea las ventanas emergentes en el origen
El CSS oculta las ventanas emergentes después de que se rendericen. JavaScript puede impedir que se rendericen en absoluto neutralizando los temporizadores y los escuchadores de desplazamiento que las activan.
// Desactivar ventanas emergentes temporizadas bloqueando los timeouts largos
const realTimeout = window.setTimeout;
window.setTimeout = function (fn, delay, ...rest) {
if (delay > 1500) return 0; // saltar retardos sospechosamente largos
return realTimeout(fn, delay, ...rest);
};
// Eliminar los modales que aún se cuelan
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 });Bloquear los timeouts más largos de 1,5 segundos elimina la mayoría de las ventanas emergentes retardadas dejando intactas las animaciones normales de la página. Ajusta el umbral si un sitio depende de temporizadores lentos.
Receta 4: impedir que la página se bloquee
Incluso con la ventana emergente oculta, algunos scripts congelan el desplazamiento añadiendo una clase al elemento <html>. Quítala y restaura el movimiento.
// Forzar el desbloqueo del desplazamiento
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';Configúralo una vez, navega en todas partes
Aplica las recetas CSS con un patrón de URL amplio como *://*/* y conserva la regla JS para los pocos sitios que necesiten fuerza adicional. Como JustZix ejecuta tus reglas antes de que la página termine de pintarse, las ventanas emergentes bien construidas ni siquiera parpadean en la pantalla.
- Empieza con la Receta 1 de forma global.
- Añade la Receta 3 solo en sitios persistentes.
- Añade a la lista blanca cualquier sitio donde un "modal" sea algo que realmente necesites.
Próximos pasos
Instala desde la página de descargar JustZix y explora el catálogo de ejemplos listos para usar para más fragmentos. Los banners de cookies son primos cercanos de las ventanas emergentes: límpialos también con nuestra guía en /es/blog/hide-cookie-walls-and-consent-popups. Con ambas reglas guardadas, la web se lee como debería: solo el contenido.
Valora este artículo
Sin valoraciones — sé el primero.