Crea Popovers Nativos con HTML: Adiós JavaScript para Modales y Menús
Inicia sesión para descargarAprende a utilizar la revolucionaria API de Popover de HTML para construir modales, menús y ventanas emergentes de forma declarativa y sin una sola línea de JavaScript. En este tutorial, te guiaremos …
Contenido del tutorial ⌄
¿Cuántas veces has instalado una librería externa o has escrito un complejo script de JavaScript solo para manejar un simple modal o un menú desplegable? Gestionar el estado de "abierto/cerrado", la accesibilidad y el foco siempre ha sido un dolor de cabeza. Hoy vamos a relegar eso al pasado con la nueva y revolucionaria API de Popover de HTML.
Crearemos un "popover" completamente funcional que se abre y se cierra, con fondo semitransparente y animaciones, usando únicamente atributos de HTML y CSS. Te sorprenderá la cantidad de código que nos vamos a ahorrar.
🤯 El Problema de Siempre
Tradicionalmente, para un pop-up necesitábamos: un botón, un div oculto, un "event listener" de JavaScript que cambiara una clase .is-open, lógica para cerrar al presionar la tecla Escape o al hacer clic fuera del modal, y manejar correctamente el foco. Era mucho trabajo para algo tan común. La API de Popover integra toda esta lógica directamente en el navegador.
🔧 Paso 1: La Estructura HTML Mágica
La magia reside en dos nuevos atributos. Primero, el botón que abrirá el popover necesita el atributo popovertarget, apuntando al id del elemento que queremos mostrar. Segundo, el elemento que será el popover (un div, por ejemplo) necesita el atributo popover y un id correspondiente. ¡Nada más!
<button popovertarget="mi-popover" class="btn-lanzador">
<i class="fas fa-share-alt"></i> Mostrar Popover
</button>
<div id="mi-popover" popover>
<h3>Este es un Popover Nativo</h3>
<p>Puedes cerrarlo presionando la tecla 'Esc' o haciendo clic fuera de él.</p>
<button popovertarget="mi-popover" popovertargetaction="hide">
Cerrar
</button>
</div>Estás viendo solo el 60% del contenido. Hazte Premium para acceder al tutorial completo.
Comentarios y valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!