Elemento dialog

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento dialog representa una parte del documento pensada para la interacción con el usuario, como por ejemplo, un cuadro de diálogo, un inspector o una ventana. HTML5 ha agregado este elemento para ofrecer a los autores soporte nativo para una característica que se ha estado logrando mediante programas por un largo tiempo. Las cajas de diálogo no sólo son parte de los documentos web, sino que han sido utilizadas en programas de escritorio por muchos años.

La definición de un elemento dialog es sencilla: solo es necesario delcarar cualquier número de elementos entre sus etiquetas de apertura y cierre. La implementación que lo hará funcionar como se espera, por otra parte, requiere el uso de programas del lado cliente. Esto se debe obviamente a la naturaleza interactiva del elemento dialog.

El atributo open puede ser declarado en un elemento dialog para indicar que el elemento debería ser inicialmente visible.

Hasta el 31/03/2015, el soporte provisto por los navegadores para el elemento dialog es muy bajo. Los autores pueden tener que recurrir a programas para lograr el mismo efecto consistentemente, hasta que el soporte crezca.

Ejemplos

En nuestro primer ejemplo, crearemos un elemento dialog con algo de contenido. Un botón (button) será provisto fuera del elemento dialog para permitirle a los usuarios abrirlo. Un segundo botón será provisto dentro del elemento dialog para cerrarlo cuando sea necesario.

Las acciones en este ejemplo son provistas por programas del lado cliente. La implementación de estos programas no será tratada en este documento.

<button type="button" onclick="abrirDialogo('dialogo1')">Abrir diálogo</button>
<dialog id="dialogo1">
  <p>Hola! Este es nuestro primer diálogo. Si te gusta, no lo cierres...</p>
  <button type="button" onclick="cerrarDialogo('dialogo1')">Cerrar</button>
</dialog>

Hola! Este es nuestro primer diálogo. Si te gusta, no lo cierres...

Puedes notar tres cosas en el ejemplo anterior: primero, el cuadro de diálogo es realmente feo (pero no te preocupes, esto puede ser cambiado con información de hojas de estilo); segundo, una vez que el cuadro de díalogo ha sido abierto, aún puedes interactuar con el contenido en el fondo; y tercero, el cuadro de diálogo se abre exactamente donde ha sido declarado (este podría ser el comportamiento esperado en algunos casos).

En el siguiente ejemplo mostraremos un lindo cuadro de diálogo, resolviendo estos tres inconvenientes. Para el primer problema, agregaremos información de estilo a traves del atributo class, y para el resto, abriremos el cuadro de diálogo de una manera especial que bloqueará el contenido del fondo y ubicará al diálogo automáticamente en el centro de la pantalla.

Las dos formas posibles de abrir un cuadro de diálogo sólo pueden ser controladas mediante programas del lado cliente. Este tema queda fuera del enfoque de este sitio y no será tratado.

<button type="button" onclick="abrirDialogo('dialogo2', true)">Abrir diálogo</button>
<dialog id="dialogo2" class="dialogoejemplo">
  <p>Wow! esto está mejor, ¿no es así?</p>
  <button type="button" onclick="cerrarDialogo('dialogo2')">Cerrar</button>
</dialog>

Wow! esto está mejor, ¿no es así?

Atributos

Atributos específicos

open

Un valor booleano que indica si el cuadro de diálogo debería ser inicialmente visible o no. Si este atributo toma el valor "open" o la cadena vacía (""), o si simplemente está presente, el cuadro de diálogo será inicialmente visible.

Ejemplo

<button type="button" onclick="abrirDialogo('dialogo3')">Abrir diálogo</button>
<dialog id="dialogo3" open>
  Hola! Sabes, me levanto realmente temprano... <input type="button" value="Cerrar" onclick="cerrarDialogo('dialogo3')">
</dialog>
Hola! Sabes, me levanto realmente temprano...

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.