Con la llegada de la recomendación de la W3C sobre HTML 5.2, se ha introducido el elemento dialog para cajas modales y nativas. En este artículo vamos a hacer un repaso sobre qué es y cómo funciona el elemento HTML dialog.
Entre otras novedades de HTML 5.2, una de las más destacadas es el elemento HTML dialog que, aunque ya lo conocíamos de antes, ha pasado por fin a formar parte de la recomendación oficial. Aunque es bastante sencillo de utilizar, existen algunas características que son fáciles de pasar por algo.
El atributo open
Este elemento incluye todos los atributos globales (id, class, hidden, style, etc), menos tabindex.
Además, añade un nuevo atributo propio, open. ¿En qué consiste?
Gracias a este atributo, podremos indicar si el diálogo está activo y el usuario puede interactuar con él. Es un atributo booleano, por lo que, si no está asignado, no deberá mostrarse al usuario, y permanecerá oculto hasta que se cambie esta propiedad mediante JavaScript.
Estilos
A continuación podemos ver el ejemplo más básico que podemos crear del elemento dialog.
<dialog>¡Soy un cuadro de diálogo!</dialog>
Por lo general, si no añadimos ningún estilo, por defecto tendrá el siguiente aspecto:
Este elemento tiene una posición absoluta en la página (mediante la propiedad position: absolute; en CSS), por lo que aparecerá frente a otros elementos, centrado horizontalmente. Si hacemos uso de las DevTools, veremos que los estilos asignados por defecto, que en este caso son:
Añadir estilos es tan simple como con cualquier otro elemento. Además podemos aplicarlos al fondo mediante el pseudo-elemento ::backdrop.
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.7);
}Operaciones básicas
Gracias a JavaScript, contamos con diversos métodos y propiedades para facilitar el trabajo con el elemento HTML dialog. Entre los métodos más utilizados se encuentran showModal() y close().
¿Recordáis que antes hablábamos sobre la propiedad open? Con estos métodos podemos manipular el valor de dicha propiedad.
const aviso = document.getElementById('aviso');
// Muestra el dialog (añadiendo el atributo open)
aviso.showModal();
// Oculta el dialog (eliminando el atributo open)
aviso.close();Cuando utilizamos JavaScript para mostrar el dialog, podremos ver que se añade un fondo a la página, cuando está visible. Este fondo es el que podemos personalizar con el pseudo-elemento backdrop.
A continuación, podemos ver un ejemplo en el que se pone en práctica lo visto en este artículo:
See the Pen Ejemplo Dialog by Sonia Ruiz (@yune) on CodePen.
Conclusiones
Hasta aquí el repaso a los conceptos más básicos del elemento HTML dialog. Es, sin duda, una buena opción cuando queremos utilizar cuadros de diálogo modales, utilizando también HTML semántico.
Sin embargo, aunque ya es parte de la recomendación oficial de la W3C, todavía no está soportado por todos los navegadores, por lo que tendremos que esperar un tiempo para comenzar a utilizarlo. Siempre puedes consultar CanIUse para ver el estado.
