Diálogo

Tipos de diálogo

El elemento <dialog> sirve para crear cuadros de diálogo.

Pueden ser de tipo modal o no modal:

• Modal: impide la interacción con el resto de la página mientras está abierto. El foco se mueve automáticamente al primer elemento interactivo del diálogo y, al cerrarse, vuelve al elemento que lo activó.
• No modal: permite continuar interactuando con otros elementos de la página aunque el diálogo esté visible.

Veamos un ejemplo:

Abrir ventana modal

Ventana modal

Texto de ejemplo de la ventana modal.

<button id="show">Abrir ventana modal</button>
<dialog id="dialog">
  <header>Ventana modal</header>
  <p>Texto de ejemplo de la ventana modal.</p>
  <footer>
    <button id="close">Cerrar</button>
  </footer>
</dialog>

Para mostrar el diálogo en modo modal se usa showModal(). Para cerrarlo, close().

const show = document.querySelector("#show");
const dialog = document.querySelector("#dialog");
const close = document.querySelector("#close");

show.addEventListener("click", () => {
  dialog.showModal();
});

close.addEventListener("click", () => {
  dialog.close();
});

Interacción con teclado

Al abrirse, el foco se traslada automáticamente al diálogo y queda contenido en él mientras esté activo.

• Tab y Shift + Tab permiten navegar entre los elementos interactivos dentro del diálogo.
• Esc cierra la ventana si está en modo modal.