Tradicionalmente, para crear un modal en una página web era necesario utilizar JavaScript o librerías externas. Sin embargo, con la nueva API de Popover de HTML, ahora es posible mostrar modales y cuadros emergentes de forma nativa, sin escribir ni una sola línea de JavaScript.
<div>
<button popovertarget="modal">Modal Box</button>
<div id="modal" popover>
<h2>Modal Box</h2>
<p>Esto es un modal box</p>
<button popovertarget="modal">Cerrar</button>
</div>
</div>Pruébalo pulsando el button:
Modal Box
Esto es un modal box
El atributo popover en el <div> convierte ese elemento en un popover que puede abrirse o cerrarse.
El botón tiene el atributo popovertarget="modal", lo que indica que debe controlar al elemento con id="modal".
Al hacer clic en el botón, el navegador abre o cierra el modal automáticamente.
Dentro del modal añadimos otro botón con el mismo popovertarget para cerrarlo.
Gracias a la API de Popover, podemos crear modales y cuadros emergentes de forma nativa, ligera y accesible. Esto simplifica mucho el desarrollo y nos ahorra tener que escribir scripts personalizados.
Deja una respuesta