<dialog>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since marzo de 2022.
* Some parts of this feature may have varying levels of support.
El elemento HTML <dialog> representa una caja de diálogo u otro componente interactivo, como inspector o ventana.
| Content categories | Flow content, sectioning root |
|---|---|
| Permitted content | Flow content |
| Tag omission | Ninguna, tanto la etiqueta inicial como la final son obligatorias. |
| Permitted parent elements | Any element that accepts flow content |
| DOM interface | HTMLDialogElement |
Atributos
Este elemento incluye los atributos globales. El atributo tabindex no debe utilizarse en el elemento <dialog>.
open-
Indica que el diálogo está activo y disponible para interactuar. Cuando el atributo open no está asignado, no debe mostrarse al usuario.
Notas de uso
- Los elementos
<form>pueden integrarse dentro de un diálogo especificándolos con el atributomethod="dialog". Cuando se envía un formulario, el diálogo se cierra con un atributoreturnValueasignado con elvaluedel botón utilizado. - El pseudo-elemento
::backdropde CSS puede utilizarse para dar estilos al elemento<dialog>, por ejemplo para atenuar contenido inaccesible mientras el diálogo modal esté activo.
Ejemplos
Ejemplo 1
html
<dialog open> <p>Greetings, one and all!</p> </dialog> Ejemplo 2
html
<!-- Simple pop-up dialog box, containing a form --> <dialog id="favDialog"> <form method="dialog"> <section> <p> <label for="favAnimal">Favorite animal:</label> <select id="favAnimal"> <option></option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select> </p> </section> <menu> <button id="cancel" type="reset">Cancel</button> <button type="submit">Confirm</button> </menu> </form> </dialog> <menu> <button id="updateDetails">Update details</button> </menu> <script> (function () { var updateButton = document.getElementById("updateDetails"); var cancelButton = document.getElementById("cancel"); var favDialog = document.getElementById("favDialog"); // Update button opens a modal dialog updateButton.addEventListener("click", function () { favDialog.showModal(); }); // Form cancel button closes the dialog box cancelButton.addEventListener("click", function () { favDialog.close(); }); })(); </script> Especificaciones
| Specification |
|---|
| HTML # the-dialog-element |
Compatibilidad con navegadores
Ver también
- Formularios HTML.
- El evento
close - El evento
cancel - El pseudo-elemento
::backdrop