`<dialog>`: elemento de diálogo

<dialog>: elemento de diálogo

• Integrado: el elemento <dialog> representa componentes interactivos como cuadros de diálogo modales o no modales, alertas, inspectores y subventanas. Está disponible en la mayoría de los navegadores desde marzo de 2022.

Atributos

• open: indica que el cuadro de diálogo está activo y se puede interactuar con él. Si el atributo open no está establecido, no será visible para el usuario. Se recomienda usar los métodos .show() o .showModal().

Notas de uso

• El elemento HTML <form> puede usar el atributo method="dialog" para cerrar el cuadro de diálogo.
• Puedes dar estilo al fondo de un cuadro de diálogo modal usando el pseudoelemento CSS ::backdrop.
• El atributo autofocus debe agregarse al elemento con el que se debe poder interactuar inmediatamente cuando se abra el cuadro de diálogo.
• Debe evitarse agregar el atributo tabindex al elemento <dialog>.

Accesibilidad

• Al implementar un cuadro de diálogo, es importante configurar correctamente el foco del usuario.
• Al abrir un cuadro de diálogo con el método showModal(), el foco se establece en el primer elemento que puede recibir foco.
• La forma más segura de permitir que todos los usuarios cierren el cuadro de diálogo es incluir un botón explícito.

Ejemplos

Cuadro de diálogo solo con HTML

• Ejemplo de cómo crear un cuadro de diálogo no modal solo con HTML. Debido al atributo open, el cuadro de diálogo está abierto cuando se carga la página.

Crear un cuadro de diálogo modal

• Ejemplo de cómo abrir un cuadro de diálogo modal usando el método .showModal(). Puede cerrarse con la tecla Esc o con el botón "Close" dentro del cuadro de diálogo.

Manejar el valor de retorno del cuadro de diálogo

• Ejemplo que usa returnValue del elemento <dialog>. Se puede usar un formulario para cerrar el cuadro de diálogo modal.

Cerrar un cuadro de diálogo con entradas obligatorias en el formulario

• Cuando el formulario dentro del cuadro de diálogo tiene campos obligatorios, se puede cerrar usando el atributo formnovalidate.

Animación de cuadros de diálogo

• Se puede animar un cuadro de diálogo animando la propiedad display del elemento <dialog>.

Resumen técnico

• Categorías de contenido: contenido de flujo, raíz de sección
• Contenido permitido: contenido de flujo
• Rol ARIA implícito: dialog
• Interfaz DOM: HTMLDialogElement

Especificaciones

• Estándar HTML # the-dialog-element

Compatibilidad con navegadores

• El elemento <dialog> y el atributo open tienen soporte completo en la mayoría de los navegadores principales.

Véase también

• Interfaz HTMLDialogElement
• Eventos close y cancel de HTMLDialogElement
• Propiedad open de HTMLDialogElement
• Atributo global inert de los elementos HTML
• Pseudoelemento CSS ::backdrop