El elemento dialog (diálogo) en HTML5

20-11-2014 - Andrés Cruz

El elemento <dialog> (diálogo) define una caja de diálogo o simplemente una nueva ventana; su aspecto y funcionamiento es similar al de un div con un color de fondo; como podrá darse cuenta, permite crear modales en una página web sin emplear ningún plugin en el proceso; los modales o también conocidas como ventanas emergentes permite a los usuarios a confirmar operaciones de manera sencilla y mucho más visual que el confirm provisto en JavaScript.

a continuación la tabla de contenido que vamos a tratar para conocer cómo trabaja este modal nativo en HTML5:

Usando el elemento <dialog> en HTML.
Atributos del elemento <dialog>.
Métodos del elemento <dialog>.
Eventos del elemento <dialog>.
Agregando estilo al elemento <dialog>.
Navegadores que soportan el elemento <dialog>.

Usando el elemento dialog en HTML

dialog es un elemento de HTML5 que permite establecer una nueva sección de manera independiente dentro del body en donde se encuentra embebido; para usar el elemento dialog tenemos que:

<body>
    <section>
        <dialog></dialog>
    </section>
</body>

Aunque puedes colocar tantos anidamientos como desees, o colocarlo como hijo directo del body:

<body>
    <dialog></dialog>
</body>

Su uso en resumidas cuentas consiste en una vez definido el HTML como hicimos anteriormente, mediante JavaScript empleamos los métodos show() o showModal() y finalmente el método close() para ocultar nuevamente el dialog.

Atributos del elemento <dialog>

Como todos los elementos en HTML, los podemos complementar con atributos según nuestras necesidades, en el caso del elemento dialog cuenta con un atributo propio como vemos a continuación:

open: Si este atributo está establecido, especifica que el modal o dialog está activo y visible; además indica que el usuario puede interactuar con el mismo.

Ver ejemplo Descargar fuente

Métodos del elemento <dialog>: show() vs showModal()

Como mencionamos antes, el elemento dialog cuenta con tres métodos, dos de ellos para mostrar el dialog y uno de ellos para ocultarlo cómo definimos a continuación:

show(): Este método es empleado para mostrar el diálogo; tiene el mismo comportamiento si se agrega el atributo open al dialog.
showModal(): Este método es empleado para mostrar el diálogo; a diferencia del primero, este método bloquea todo el contenido a excepción del dialog anteponiendo una ventana transparente.
close(): Este método es empleado para ocultar el diálogo o modal; tiene el mismo comportamiento si se quitase el atributo open al dialog.

Ver ejemplo Descargar fuente

Eventos del elemento <dialog>

El elemento dialog cuenta con un único evento que se ejecuta cuando se cierre el dialog:

dialog.addEventListener('close', function() {
//*** hacer algo
});

Dando estilo al elemento <dialog>

Como último punto, trataremos el asunto de los estilos, que como cualquier otro elemento HTML, podemos colocar todos los estilos a gusto y que nuestro dialog o ventana emergente luzca como queramos sobrescribir su aspecto por defecto definiendo reglas que alteren su posición, tamaño, forma, redondeo de las esquinas, podemos crear un header para el título, otro contenedor como cuerpo o body para el contenido, alterar el botón para cerrar y muchas cosas que se te puedan ocurrir como puedes ver en este ejemplo:

Ver ejemplo Descargar fuente

Navegadores que soportan el elemento <dialog>

A pasado un muy buen tiempo y aunque en la documentación oficial en la w3schools indique que Firefox soporta esta característica: W3C en la documentación de la MDN indica que no, que aun no hay soporte para Firefox así como ningun navegador móvil hasta el momento; hasta la fecha solo existe soporte para Google Chrome, Safari y Opera.

HTML Dialog

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy