Etiqueta HTML `<dialog>`

La <dialog> tag es uno de los elementos HTML5. Se utiliza para crear un cuadro de diálogo nativo con el que el usuario interactúa y realiza determinadas acciones. Por ejemplo, puedes crear mensajes emergentes o formularios con este elemento. El cuadro de diálogo está oculto por defecto. Se vuelve visible cuando se establece el atributo open.

Para mostrar u ocultar el contenido, necesitamos la API de JavaScript.

Si <form> se especifican con el atributo method="dialog", pueden combinarse dentro de un diálogo. Si se proporciona dicho formulario, el diálogo se cierra al enviarse el formulario, y la propiedad returnValue almacena el valor del botón pulsado.

Para dar estilo al área detrás del elemento <dialog>, puedes usar el pseudo-elemento CSS ::backdrop.

Sintaxis

La <dialog> tag se escribe en pares. El contenido se coloca entre la etiqueta de apertura (<dialog>) y la de cierre (</dialog>).

Ejemplo de la etiqueta HTML `<dialog>`:

Etiqueta HTML <dialog>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      dialog {
        width: 40%;
      }
    </style>
  </head>
  <body>
    <div>
      <dialog id="DialogExample">
        <p>
          Here is some text for example.
        </p>
        <button id="hide">Close dialog text</button>
      </dialog>
      <button id="show">Show dialog text</button>
    </div>
    <script type="text/javascript">
      (function() { var dialog = document.getElementById('DialogExample'); document.getElementById('show').onclick = function() { dialog.showModal(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })();
    </script>
  </body>
</html>

Try it Yourself »

Resultado

dialog example

Atributos

Atributo	Valor	Descripción
open	open	Indica que el cuadro de diálogo está activo y el usuario puede interactuar con él.

La <dialog> tag también admite los Atributos Globales y los Atributos de Eventos.

Cómo dar estilo a una etiqueta HTML <dialog>

Puedes personalizar la apariencia del diálogo y su superposición de fondo utilizando CSS. El pseudo-elemento ::backdrop apunta al área detrás del diálogo.

css

dialog {
  border: 1px solid #ccc;
  border-radius: 0.5em;
  padding: 1em;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

Nota sobre los métodos de JavaScript: El ejemplo utiliza dialog.showModal(), que muestra el diálogo como modal (bloqueando la interacción con el resto de la página). Para mostrar un diálogo no modal que permita interactuar con otros elementos, utiliza dialog.show() en su lugar.

Práctica

¿Qué atributos admite la etiqueta HTML <dialog>?

<open>: Este atributo booleano indica que el cuadro de diálogo es accesible y/ o interactivo.<modal>: Este atributo requiere interacción del usuario y, por lo tanto, impide la interacción con el resto de la página web hasta que se cierre el cuadro de diálogo.La etiqueta <dialog> no admite ningún atributo.<returnValue>: A diferencia de open y showModal(), este no refleja un atributo de contenido y su propósito es contener una cadena que puede generarse y utilizarse cuando se cierra el cuadro de diálogo.

Etiqueta HTML <dialog> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <dialog>: ​

Resultado ​