Hoy hablaremos de una etiqueta en HTML que quizás no sea tan conocida, pero que es bastante útil: la etiqueta dialog.
Esta etiqueta, aunque no es nueva, no es muy común.
Se utiliza con JavaScript, similar a otras etiquetas como Canvas o Data.
Y antes de nada, recuerda que este post forma parte del diccionario HTML de Dropcoding, donde puedes encontrar todas y cada una de las estiquetas de este lenguaje.
Así que sin más, vamos a ver que es esta etiqueta.
¿Qué es la etiqueta dialog en HTML?
La etiqueta dialog, como su nombre en inglés lo indica, se usa para crear cuadros de diálogo o ventanas modales en una página web.
Estos elementos son especialmente útiles en formularios de contacto o en cualquier otro elemento interactivo donde se requiera la atención del usuario.
Pero hay un detalle importante: por defecto, la etiqueta dialog no se muestra en la página. Necesita ser activada, usualmente a través de métodos JavaScript como show o Show modal.
Ejemplo de la etiqueta Dialog
Para entender mejor cómo funciona, veamos un ejemplo práctico.
En nuestro editor, tenemos un código con la etiqueta dialog que incluye un párrafo y un botón para cerrar. El párrafo dice algo tan sencillo como «Hola, este es un cuadro de diálogo» (muy original).
<!-- Definición del cuadro de diálogo -->
<dialog id="miDialogo">
<p>Hola, este es un cuadro de diálogo.</p>
<button id="cerrar">Cerrar</button>
</dialog>Además, hay un botón etiquetado como «Mostrar diálogo».
<!-- Botón para abrir el cuadro de diálogo -->
<button id="abrir">Mostrar Diálogo</button>Este botón es clave, ya que al hacer clic en él, activamos el diálogo mediante JavaScript.
<script>
// Obtener los elementos
const dialogo = document.getElementById('miDialogo');
const botonAbrir = document.getElementById('abrir');
const botonCerrar = document.getElementById('cerrar');
// Mostrar el cuadro de diálogo
botonAbrir.addEventListener('click', function() {
dialogo.showModal();
});
// Cerrar el cuadro de diálogo
botonCerrar.addEventListener('click', function() {
dialogo.close();
});
</script>En el script asociado, tenemos tres constantes: mi diálogo, abrir y cerrar, cada una con una función específica.
Al hacer clic en abrir, se muestra el diálogo, y al pulsar cerrar, se oculta.
Así de sencillo es el ejemplo.
Como has podido ver, la etiqueta dialog en HTML no es complicada de usar, aunque sí requiere un poco de JavaScript para funcionar correctamente.
Sin este lenguaje, el contenido de la etiqueta dialog permanecerá oculto.
Podrías intentar una solución alternativa con CSS, pero sería menos efectiva y elegante.
Espero que este tutorial te haya sido útil. Si tienes dudas o sugerencias, no dudes en dejarlas en los comentarios.
¡Hasta la próxima lección!