Desafortunadamente, mostrar siempre una alerta ocupa un espacio de pantalla muy necesario. Podemos resolver esto haciéndolo descartable. Hoy, construiremos uno desde cero usando
localStorage
y JavaScript.
Lo que estamos creando
El ejemplo en este caso es un sitio web primitivo similar a un portafolio con un pie de página, navegación y área de contenido. En la parte superior de la ventana gráfica, mostramos una alerta que solicita al visitante que se suscriba. En un mundo ficticio, el sitio web que maquetamos podría tener contenido premium solo disponible para suscriptores.
Vea cómo funciona nuestra alerta en el bolígrafo a continuación; aunque una vez que lo haya descartado, ya no podrá verlo en este navegador, por lo que hay una captura de pantalla debajo para recordárselo:



1. Agregar el marcado
En la parte superior de la página, agregaré el marcado HTML de alerta. El código se coloca después de la
body
etiqueta en su documento HTML.
<html> <body> <div class="alert" role="alert"> 📰 Subscribe to view this entire article <button> <svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" > <title>close</title> <g fill="none"> <path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75l-10.5 10.5" ></path> <path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75l10.5 10.5" ></path> </g> </svg> </button> </div> </body> </html>
La alerta es un
div
con un
role="alert"
opción que le dice al navegador y a las características de accesibilidad que el contenido está destinado a señalar al usuario final.
Agregamos un
button
elemento que envuelve un
SVG
icono que copié de heroicons, una biblioteca de iconos de código abierto. los
button
El elemento será responsable de activar el rechazo de la alerta cuando se haga clic en él, y agregaremos la lógica para que funcione.
Contenido de demostración
Debajo de la alerta, agregaremos contenido de marcador de posición para imitar el sitio web de la cartera.
<header class="header"> <nav aria-label="Main"> <ul> <li><a href="https://webdesign.tutsplus.com/tutorials/#">Home</a></li> <li><a href="https://webdesign.tutsplus.com/tutorials/#">Blog</a></li> <li><a href="https://webdesign.tutsplus.com/tutorials/#">Projects</a></li> <li><a href="https://webdesign.tutsplus.com/tutorials/#">Contact</a></li> </ul> </nav> </header> <main class="main"> <h2>Curabitur blandit tempus porttitor.</h2> <p>Lorem ipsum.....</p> <div class="callout"> <a href="https://webdesign.tutsplus.com/tutorials/#">Sign in</a> or <a href="https://webdesign.tutsplus.com/tutorials/#">sign up</a> to view this article. </div> </main> <footer class="footer"> <nav aria-label="Main"> <ul> <li><a href="https://webdesign.tutsplus.com/tutorials/#">Home</a></li> <li><a href="https://webdesign.tutsplus.com/tutorials/#">Blog</a></li> <li><a href="https://webdesign.tutsplus.com/tutorials/#">Projects</a></li> <li><a href="https://webdesign.tutsplus.com/tutorials/#">Contact</a></li> </ul> </nav> </footer>
Representamos la navegación compartida dentro de ambos
header
y el
footer
bloques Cada navegador tiene un
aria-label="Main"
atributo para indicar que son los mismos controles en dos ubicaciones.
los
main
El elemento contiene contenido de marcador de posición y un
div
elemento con la clase de llamada. La llamada es una venta adicional para que los visitantes del sitio web vean el contenido de la página.
2. Estilo de la página
Para mantener las cosas compatibles con el tema, aprovecharé las variables CSS en esta guía para que pueda modificar los colores de su lado.
Los estilos de alerta siguen las variables.
:root { --primary: #2563eb; --bg-light: #f1f5f9; --bg-alert: #1d4ed8; --bg-callout: #dbeafe; --border-base: #cbd5e1; --text-base: #475569; } .alert { background: var(--bg-alert); padding: 1rem; text-align: center; color: white; position: relative; transform: scaleY(1); transition: all ease-in-out 0.3s; } .alert button { border: none; background: transparent; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; top: 8px; right: 5px; } .alert button:hover { background: rgba(255, 255, 255, 0.35); } .alert-hidden { opacity: 0; padding: 0; visibility: hidden; transform: scaleY(0); transform-origin: top; transition: all ease-in-out 0.3s; } .alert button:focus { box-shadow: inset 0 0 0 2px var(--border-base); }
los
.alert
el elemento del botón está absolutamente posicionado dentro del
.alert
división Nuestro botón fija el botón en el lado derecho de la alerta y se desplaza ligeramente desde la parte superior.
Ocultación más ordenada de la alerta
Usted puede notar un
transform
propiedad en el
.alert
clase. Y el mismo
transform
propiedad en el
alert-hidden
clase. Estaremos alternando el
alert-hidden
clase con JavaScript acercándose. los
transform
propiedad combinada con
transition
nos brinda una forma más eficaz de mostrar y ocultar la alerta con una buena animación. Utilizando el
scaleY(0)
enfoque, podemos alternar gradualmente la apariencia.
Vale la pena señalar que podríamos alternar la apariencia con un
display
property, pero hacerlo con JavaScript no deja espacio para ninguna animación si desea tenerlas.
Estilos adicionales
Aquí hay algunos estilos adicionales para abordar los otros componentes de la página. En su mayor parte, son fundamentales. El contenedor de llamada tiene algunas propiedades establecidas para que se destaque más que el resto del contenido de la página.
.header { border-bottom: 1px solid var(--border-base); } .header, .footer { padding: 1rem; } .footer { background: var(--bg-light); padding: 1rem; } .header ul li, .footer ul li { display: inline; padding: 0 5px; } .main { max-width: 767px; padding: 1rem; margin-left: 2.75rem; margin-bottom: 2rem; } .callout { background: var(--bg-callout); padding: 2rem; border-radius: 6px; } p { color: var(--text-base); line-height: 1.4; } ul { list-style: none; } a { color: var(--primary); text-decoration: none; }
3. Descartar la alerta
Con JavaScript, podemos conectarnos a la API de eventos del navegador para escuchar los cambios. Un evento típico utilizado es el evento “clic”.
Antes de que podamos escuchar el evento, debemos decirle a JavaScript qué elemento debe buscar en el DOM.
- Un
alert
variable: responsable de dirigir la alerta en sí. - A
dismissAlertButton
variable: responsable de apuntar a labutton
elemento dentro del.alert
división
const alert = document.querySelector(".alert") const dismissAlertButton = document.querySelector(".alert button")
A continuación, debemos escuchar el evento de “clic” mencionado anteriormente, para saber cuándo descartar la alerta. Podemos hacer eso usando el
addEventListener()
método en el botón.
dismissAlertButton.addEventListener("click", (event) => { console.log("Clicked!") })
Podemos usar el práctico
console.log()
utilidad para probar cosas. El botón debe iniciar sesión ¡Hiciste clic! a la consola de su navegador.
4. Prevención de la lógica predeterminada
Para cualquier uso de la
addEventListener
método, obtenemos una instancia gratuita del propio objeto de evento para usar dentro del método. Esto es importante para los casos en los que es posible que deba sobrescribir los valores predeterminados del navegador. Por lo general, es una buena idea evitar la lógica predeterminada de un elemento al que se dirige con JavaScript.
dismissAlertButton.addEventListener("click", (event) => { event.preventDefault() })
A continuación, debemos alternar la visibilidad de la alerta. Podemos hacer esto de varias maneras, pero como se mencionó en la sección CSS, aprovecharemos un enfoque más animado.
if (dismissAlertButton) { dismissAlertButton.addEventListener("click", (event) => { event.preventDefault() alert.classList.add("alert-hidden") }) }
Aquí añadimos el
alert-hidden
clase, que efectivamente desvanece la alerta fuera de la vista al hacer clic en el botón. ¡Funciona!
Puede notar que agregué algo de lógica condicional para verificar que el
dismissAlertButton
no es
null.
Si hubiera una página sin el botón, nuestro JavaScript generaría un error. Para solucionar este problema, puede agregar una verificación condicional para asegurarse de que el elemento esté en la página. Un simple
if
declaración debe hacer el trabajo.
5. Guardar estado local
Desafortunadamente, la alerta vuelve a mostrarse cuando vuelve a cargar la página después de hacer clic en el botón de descartar. Podemos abordar esto con algo llamado
localStorage
integrado en los navegadores modernos.
localStorage
le permite guardar un poco de datos del navegador temporalmente. No pretende ser un verdadero almacén de datos como una base de datos, pero funciona de manera similar.
aprovecharemos
localStorage
para establecer un nuevo par de clave y valor en el navegador. Luego podemos verificar si ese valor está configurado antes de mostrar la alerta.
La API es relativamente sencilla. Al final, aquí está el código final.
const alert = document.querySelector(".alert") const dismissAlertButton = document.querySelector(".alert button") if (localStorage.getItem("hideAlert")) { alert.style.display = "none" } if (dismissAlertButton) { dismissAlertButton.addEventListener("click", (event) => { event.preventDefault() alert.classList.add("alert-hidden") localStorage.setItem("hideAlert", true) }) }
Esto es lo que está pasando:
- Verificaremos si el botón de descartar está presente y, de ser así, escucharemos un evento de clic en él.
- Si se activa el evento de clic, agregamos el
alert-hidden
clase a la alerta. - Con
localStorage
llamamos alsetItem
y pasar un par clave-valor dehideAlert
ytrue
. - Si la página volviera a cargarse, inmediatamente nos conectamos a “localStorage” nuevamente para llamar al
getItem
método dirigido al mismo par de clave y valor establecido anteriormente y ocultar la alerta con CSS a través de JavaScript.
Algunas limitaciones
localStorage
es una excelente solución para las cosas simples. A medida que trabaja en mi ejemplo, puede notar un ligero parpadeo cuando el navegador se carga nuevamente, y
localStorage
se establecen los valores.
Este es un inconveniente del enfoque, ya que HTML y CSS a menudo se cargan antes de ejecutar JavaScript. La única forma de evitar esto es una solución renderizada del lado del servidor donde el código es dinámico en relación con un valor real respaldado por la base de datos.
Pensamientos finales
Los elementos descartables son una excelente manera de captar la atención y limpiar el espacio de pantalla que tanto se necesita. Los visitantes de su sitio web aprecian la capacidad de descartar algo, incluso si es útil saberlo.