<dialog>
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 (en-US) |
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
(en-US) 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
<dialog open>
<p>Greetings, one and all!</p>
</dialog>
Ejemplo 2
<!-- 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 de navegadores
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Ver también
- Formularios HTML (en-US).
- El evento
close
- El evento
cancel
- El pseudo-elemento
::backdrop