Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
<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.
ElelementoHTML<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 acceptsflow content |
| DOM interface | HTMLDialogElement |
Atributos
Este elemento incluye losatributos globales. El atributotabindex no debe utilizarse en el elemento<dialog>.
openIndica 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> <form method="dialog"> <section> <p> <label for="favAnimal">Favorite animal:</label> <select> <option></option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select> </p> </section> <menu> <button type="reset">Cancel</button> <button type="submit">Confirm</button> </menu> </form></dialog><menu> <button>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