En HTML5 es posible crear ventanas de diálogo personalizadas sin necesidad de Javascript (o mediante muy poco Javascript), de forma nativa, e incluso crear ventanas modales. Todo ello, se realizará mediante la etiqueta HTML <dialog>
en diferentes modalidades:
Ventana de diálogo: Se denomina así a una ventana que comunica el sistema o máquina con el usuario, para anunciarle información y pedirle confirmación, para pedirle datos, etc.
Ventana de diálogo modal: Se denomina así a una variación de la anterior, donde se obliga al usuario a atenderla y responderla, impidiendo hacer ninguna otra tarea mientras.
<dialog>
A partir de HTML5.1, se incorpora una etiqueta <dialog>
mediante la cuál podemos construir nuestras propias ventanas de diálogo personalizadas. Dichas ventanas pueden contener toda la información HTML que queramos: texto, imágenes, botones, video o cualquier otra cosa, y ser personalizada mediante CSS.
Un ejemplo básico podría ser el siguiente:
<dialog open>
<p>Esto es un ejemplo de mensaje de diálogo.</p>
</dialog>
Al igual que vimos en la etiqueta <details>
, la etiqueta <dialog>
tiene un atributo open
que de no establecerlo, se considera que la ventana de diálogo está cerrada (tiene un display: none
de CSS por defecto), por lo que no se muestra.
Como puedes ver, la forma de crear ventanas de diálogo es muy sencilla. En el interior de <dialog>
puedes indicar toda la información que queramos mostrar en la ventana:
<dialog open>
<img class="icon" src="information.png" alt="Information icon">
<p>Esto es un ejemplo de mensaje de diálogo.</p>
<button>Aceptar</button>
</dialog>
Además, aunque la etiqueta <dialog>
ya tiene un CSS mínimo para que se vea bien, mediante CSS podemos darle estilo como a cualquier otro elemento HTML, convirtiendo nuestra ventana de diálogo en algo más bonito de lo que viene por defecto, aplicando colores de borde, fondo, gradientes, sombras y otros detalles.
Sin embargo, habrás comprobado que en el ejemplo anterior, a pesar de existir un botón, este no tiene funcionalidad, ya que aún carece de código Javascript donde darle la funcionalidad. Además, también sería interesante tener un botón (o una forma) de abrir el mensaje de diálogo, y que por defecto esté cerrado (oculto).
Para ello, tenemos que usar algo de Javascript. Así que vamos allá:
<dialog id="alert-dialog">
<img class="icon" src="information.png" alt="Information icon">
<p>Esto es un ejemplo de mensaje de diálogo.</p>
<button onClick="this.parentElement.close()">Aceptar</button>
</dialog>
<button id="show-button">Mostrar diálogo</button>
En este fragmento de código hemos añadido varios detalles:
<dialog>
tiene un id
para identificarla posteriormente.<dialog>
no tiene atributo open
por lo que estará oculta por defecto.<button>
del diálogo, le hemos puesto un evento onClick
<dialog>
que es su elemento padre (this.parentElement) y ejecuta el método .close()
de ese elemento padre, para cerrarlo.id
con valor show-button
.Ahora, mediante Javascript, vamos a darle funcionalidad al botón show-button
:
const showButton = document.querySelector("#show-button");
showButton.addEventListener("click", function () {
const alertDialog = document.querySelector("#alert-dialog");
alertDialog.show();
});
En este caso, estamos localizando el botón con id
a #show-button
y escuchando los eventos de click
sobre él. Cuando ocurra alguno, localizamos la ventana de diálogo con id
a #alert-dialog
y la mostramos ejecutando el método .show()
.
Como hemos comentado anteriormente, una ventana modal es un tipo de ventana que se muestra al usuario, generalmente, para avisarle de algo o pedirle una información necesaria para continuar. Se caracteriza en que una vez se muestra, no se le permite interactuar con cualquier otro elemento de la página hasta que atienda el mensaje de esa ventana modal.
Para crear una ventana modal con la etiqueta <dialog>
usaremos exactamente el mismo código anterior, sólo tendremos que cambiar el método .show()
por .showModal()
:
const showButton = document.querySelector("#show-button");
showButton.addEventListener("click", function () {
const alertDialog = document.querySelector("#alert-dialog");
alertDialog.showModal();
});
Esto nos permitiría mostrar una ventana modal, que tiene algunas diferencias con el ejemplo anterior de la ventana de diálogo no modal:
Diferencias:
Aunque el navegador ya nos muestra algunos cambios visuales en el fondo de una ventana modal, nosotros podemos hacer más cambios utilizando el pseudoelemnto CSS ::backdrop
sobre la ventana de diálogo. De esta forma, podremos darle estilos al fondo de la ventana modal, y así enfatizar la importancia de nuestra ventana:
#alert-dialog::backdrop {
background: linear-gradient(#000d, #000a);
}
Observa que hemos establecido un fondo con un gradiente lineal CSS que va desde un color negro con cierta transparencia, hasta otra tonalidad de color negro con algo más de transparencia. Por supuesto, el desarrollador puede personalizar estos estilos a su gusto para que encajen con el diseño de la página o la situación correspondiente.
Aunque las ventanas de diálogo de HTML5 son bastante desconocidas, su soporte es bastante bueno actualmente en navegadores, por lo que se pueden utilizar con seguridad:
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev