Cómo crear una ventana emergente de intención de salida

¿Conoces esas molestas ventanas emergentes que aparecen cuando intentas cerrar una ventana del navegador?

De alguna manera saben que estás intentando cerrarlo, como si pudieras leer tu mente.

En realidad es un concepto bastante simple: tienes que escuchar un evento DOM específico.

Ciertamente no recomiendo el uso de popups, porque los encuentros molestos, pero es posible que tu empresa te pida implementar uno, así que aquí estamos.

Me gusta mantener las cosas simples, así que aquí está el HTML.

!doctype htmlhead titlePopup page/title/headbody div h3Popup!/h3 /div/body

Añade este CSS:

body { font-family: system-ui; background-color: #f6d198;}#popup { position: fixed; width: 100%; visibility: hidden; z-index: 10002; top: 0; opacity: 0; transform: scale(0.5); transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; position: relative; margin: 0 auto; text-align: center; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); width: 60%; background: #862a5c; padding-bottom: 100px; padding-top: 50px; color: #fff; font-size: 2rem;}

y este JavaScript:

const show = () = { const element = document.querySelector("#popup") element.style.visibility = "visible" element.style.opacity = "1" element.style.transform = "scale(1)" element.style.transition = "0.4s, opacity 0.4s"}document.addEventListener("DOMContentLoaded", () = { document.addEventListener("mouseout", (event) = { if (!event.toElement !event.relatedTarget) { setTimeout(() = { show() }, 1000) } })})

Véalo en Codepen: https://codepen.io/flaviocopes/pen/gOawyKr

La página debería parecer bastante aburrida:

Si intenta cargar y entrar o salir de la página con el mouse, debería aparecer una ventana emergente:

Esto se debe al hecho de que escuchamos el mouseoutevento y queremos 1 segundo antes de mostrar la ventana emergente.

Una vez que tengas los conceptos básicos, puedes comenzar a agregar cosas sofisticadas como cerrar la ventana emergente si el usuario presiona la esctecla:

const hide = () = { const element = document.querySelector("#popup") element.style.visibility = "hidden" element.style.opacity = "0" element.style.transform = "scale(0.5)" element.style.transition = "0.2s, opacity 0.2s, visibility 0s 0.2s"}document.addEventListener("DOMContentLoaded", () = { document.onkeydown = event = { event = event || window.event if (event.keyCode === 27) { hide() } }})

y si el usuario hace clic en el documento fuera del modal:

let eventListener//inside show()eventListener = document.addEventListener("click", function (clickEvent) { let el = clickEvent.target let inPopup = false if (el.id === 'popup') { inPopup = true } while (el = el.parentNode) { if (el.id == "popup") { inPopup = true } } if (!inPopup) hide()})//inside hide()if (eventListener) { document.removeEventListener(eventListener)}

Ejemplo en Codepen: https://codepen.io/flaviocopes/pen/abvmrzg

Ahora, algo interesante que podemos hacer es almacenar el hecho de que mostramos el modal en una cookie, de modo que solo lo mostramos una vez a cada persona.

Esta es una posible implementación: configuramos la popup=truecookie cuando mostramos el modal y verificamos la cookie antes de mostrarlo nuevamente:

let showed = false;const show = () = { if (showed) return; if ( document.cookie.split(";").filter((item) = { return item.includes("popup="); }).length ) { return; } else { console.log( document.cookie.split(";").filter((item) = { return item.includes("popup=") }).length ) console.log(document.cookie.split(";")) } document.cookie = "popup=true;path=/;max-age=15768000" showed = true //...the remaining part of show()

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Cómo crear una ventana emergente de intención de salida

¿Conoces esas molestas ventanas emergentes que aparecen cuando intentas cerrar una ventana del navegador?

programar

es

2025-01-06

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente