<dialog>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
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 | None, both the starting and ending tag are mandatory. |
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 atributoreturnValue
asignado con elvalue
del botón utilizado. - El pseudo-elemento
::backdrop
de 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 Standard # the-dialog-element |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver también
- Formularios HTML.
- El evento
close
- El evento
cancel
- El pseudo-elemento
::backdrop