Dialog

La etiqueta dialog es un elemento nativo de HTML5 diseñado para construir ventanas emergentes (modales, alertas, pop-ups) de forma estandarizada. Su gran ventaja es que el navegador gestiona automáticamente la superposición, el bloqueo del fondo y la accesibilidad (como atrapar el foco del teclado dentro del modal), tareas que antes requerían decenas de líneas de JavaScript.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>Ejemplo modal con sólo HTML</h1>
    <button command="show-modal" commandfor="my-dialog">Open dialog</button>
    <dialog id="my-dialog" closedby="any">
        <p>Ejemplo de modal sin CSS (feo entonces)</p>
        <form method="dialog">
            <button>Cerrar modal</button>
        </form>

    </dialog>
</body>

</html>

Los elementos que encontramos dentro de el ejemplo anterior son:

button para abrir el dialog

<button command="show-modal" commandfor="my-dialog">Open dialog</button>

Esta etiqueta utiliza la API de comandos (Invoker Commands API) para interactuar con el modal sin escribir JavaScript. El atributo commandfor vincula el botón con el id exacto de la ventana ("my-dialog"), mientras que command="show-modal" le instruye al motor del navegador la acción específica que debe ejecutar: abrir la etiqueta vinculada en modo bloqueante (oscureciendo el resto de la página).

Como podemos ver en la página de can I use, este atributo a día de hoy es compatible con la mayoría de navegadores.

Etiqueta dialog

Es el contenedor nativo de la ventana emergente. El id sirve como ancla para que el botón de apertura lo localice. El atributo experimental closedby, implementado aquí como un atributo booleano (sin especificar "any" o "none"), indica al navegador que habilite los métodos de cierre predeterminados del sistema, permitiendo al usuario salir del modal al pulsar la tecla Escape o al hacer clic en el fondo oscuro exterior.

Formulario con method dialog

Se trata de una variante semántica introducida en HTML5 para el manejo de modales. Al definir method="dialog", el formulario pierde su comportamiento clásico de enviar datos a un servidor o recargar la pestaña. Su propósito exclusivo pasa a ser el cierre automático de la etiqueta <dialog> en la que se encuentra anidado.

button de cierre

Como este botón se encuentra dentro del formulario especial y no tiene definido un type="button", actúa de manera predeterminada como un botón de envío (submit). Al hacer clic sobre él, dispara el evento del <form method="dialog"> e inmediatamente cierra la ventana emergente de forma nativa.

<< Etiquetas nuevas Details >>