Etiqueta DIALOG

La etiqueta HTML <dialog> indica una parte de una aplicación con la que el usuario puede interactuar para realizar una tarea. Por ejemplo, un cuadro de diálogo, inspector o ventana.

El elemento <dialog> acepta un atributo booleano llamado open que establece el elemento como “activo” y permite a los usuarios interactuar con él. Si se omite el atributo, deberás utilizar un script (como JavaScript) para permitir que el diálogo se abra y se cierre según sea necesario.

Sintaxis

La etiqueta <dialog> se escribe como <dialog id=""></dialog> con el contenido del diálogo insertado entre las etiquetas de inicio y fin. El atributo id se puede utilizar para asociar un script con el elemento <dialog>.

De esta manera:

<dialog id="">
    <p>Contenido del diálogo...</p>
    <button id="hide">Cerrar</button>
</dialog>

Ejemplos

Uso básico de etiquetas

A continuación, se muestra un ejemplo del elemento <dialog> que se utiliza en su forma más básica. Se ha agregado el atributo open, lo que significa que el diálogo ya está abierto cuando se carga la página.

<dialog open>
<p><q>El mundo está lleno de cosas mágicas que esperan pacientemente que nuestra astucia se vuelva más aguda.</q> - <cite>Bertrand Russell</cite></p>
</dialog>

See the Pen Dialog tag by Alex (@htmldesdecero) on CodePen.

Abrir/Cerrar el diálogo

Para que el usuario pueda interactuar correctamente con el cuadro de diálogo, deberás utilizar un script (como JavaScript). La interfaz HTMLDialogElement proporciona una serie de métodos y propiedades que te permiten controlar el cuadro de diálogo (más información a continuación, en “La interfaz HTMLDialogElement”).

<dialog id="dialog1">
<p><q>El mundo está lleno de cosas mágicas que esperan pacientemente que nuestra astucia se vuelva más aguda.</q> - <cite>Bertrand Russell</cite></p>
<button id="hide1">Cerrar</button>
</dialog>
<!-- Botón "Mostrar" -->
<button id="show1">Mostrar Diálogo</button>

<script type="text/JavaScript">
(function() {  
    var dialog1 = document.getElementById('dialog1');  
    document.getElementById('show1').onclick = function() {  
        dialog1.show();  
    };  
    document.getElementById('hide1').onclick = function() {  
        dialog1.close();  
    };  
})(); 
</script>

See the Pen Opening/Closing Dialog by Alex (@htmldesdecero) on CodePen.

Estilos

Puedes agregar estilos al elemento utilizando CSS.

<dialog id="dialog2">
<p><q>El mundo está lleno de cosas mágicas que esperan pacientemente que nuestra astucia se vuelva más aguda.</q> - <cite>Bertrand Russell</cite></p>
<button id="hide2">Cerrar</button>
</dialog>
<!-- Botón "Mostrar" -->
<button id="show2">Mostrar Diálogo</button>

dialog{width:200px;background-color:#F4FFEF;border:1px dotted black;}

(function() {  
    var dialog2 = document.getElementById('dialog2');  
    document.getElementById('show2').onclick = function() {  
        dialog2.show();  
    };  
    document.getElementById('hide2').onclick = function() {  
        dialog2.close();  
    };  
})(); 

See the Pen dialog CSS JS by Alex (@htmldesdecero) on CodePen.

Diálogos modales

Puedes crear diálogos modales utilizando el método showModal() (en contraposición al método show()).

Los diálogos modales crean un modo en el que la ventana principal no se puede utilizar hasta que el usuario haya interactuado con el diálogo (es decir, lo haya cerrado). La mayoría de los navegadores tiñen el color de fondo a un tono más oscuro, lo que llama la atención sobre el cuadro de diálogo.

Ten en cuenta que todavía necesitas utilizar el método close() para cerrar el diálogo (es decir, no hay ningún método closeModal()).

<dialog id="dialog3">
<p>Al ver este diálogo aceptas regalar todas tus posesiones, unirte a un monasterio en el norte de Tailandia y meditar durante el resto de tu vida.</p>
<button id="hide3">Acepto</button>
</dialog>
<!-- "Show" button -->
<button id="show3">Mostrar Diálogo</button>

dialog{width:200px;}

<script type="text/JavaScript">
(function() {  
    var dialog3 = document.getElementById('dialog3');  
    document.getElementById('show3').onclick = function() {  
        dialog3.showModal();  
    };  
    document.getElementById('hide3').onclick = function() {  
        dialog3.close();  
    };  
})(); 
</script>

See the Pen Modal Dialog by Alex (@htmldesdecero) on CodePen.

Estilos de diálogos modales

Puedes utilizar la pseudo clase CSS ::backdrop para cambiar el color del fondo modal. Es decir, puedes cambiar el color o sombreado que el navegador le da al resto de la ventana del navegador cuando el diálogo modal está abierto.

Por ejemplo, dialog::backdrop {background-color: rgba(0, 255, 0, 0.5);} hará que el fondo sea verde, con una opacidad de 0.5. De esta manera:

<style>
dialog {width:200px;background: orange;}
dialog::backdrop {background: rgba(0, 255, 0, 0.5);}
</style>

<dialog id="dialog4">
<p>No olvides regalar todas tus posesiones.</p>
<button id="hide4">Aceptar</button>
</dialog>
<!-- "Show" button -->
<button id="show4">Mostrar Diálogo</button>

<script type="text/JavaScript">
(function() {  
    var dialog4 = document.getElementById('dialog4');  
    document.getElementById('show4').onclick = function() {  
        dialog4.showModal();  
    };  
    document.getElementById('hide4').onclick = function() {  
        dialog4.close();  
    };  
})(); 
</script>

See the Pen Modal Dialogs CSS by Alex (@htmldesdecero) on CodePen.

La Interfaz HTMLDialogElement

Como se ve en los ejemplos anteriores, puedes utilizar JavaScript para controlar el elemento <dialog>. Esto se logra a través de la interfaz HTMLDialogElement.

Entonces, la interfaz HTMLDialogElement se trata de una interfaz de programación de aplicaciones (API) en JavaScript que proporciona métodos y propiedades para controlar elementos en HTML. Esta interfaz permite interactuar con los diálogos modales en una página web, como abrir, cerrar y manipular su contenido dinámicamente.

Por ejemplo, puedes usar métodos como show() para mostrar un diálogo y close() para cerrarlo. También puedes acceder a las propiedades para obtener información sobre el diálogo, como su estado de apertura (open).

Para obtener más información sobre la interfaz HTMLDialogElement, consulta Etiqueta <dialog> HTML5.

Atributos

Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo debe aparecer o comportarse el elemento.

El elemento acepta los siguientes atributos.

Atributos Globales

Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes utilizar estos atributos con la etiqueta (excepto tabindex), así como con todas las demás etiquetas HTML.

• accesskey
• autocapitalize
• class
• contenteditable
• data-*
• dir
• draggable
• hidden
• id
• inputmode
• is
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• part
• slot
• spellcheck
• style
• tabindex
• title
• translate

Ten en cuenta que el atributo tabindex no se aplica a los elementos <dialog>.

Para obtener una explicación completa de estos atributos, consulta Atributos globales de HTML 5.