This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
L'element HTML <dialog
> representa un quadre de diàleg o un altre component interactiu, tal com un inspector o finestra. Els elements <form>
poden integrar-se dins d'un diàleg especificant l'atribut method="dialog"
. Quan s'envia un formulari, el diàleg es tancat amb un atribut returnValue
establert en el valor del botó d'enviament utilitzat.
El pseudo-element CSS ::backdrop
es pot utilitzar per donar estil el darrer d'un element <dialog>
, per exemple per atenuar un contingut inaccessible mentre que està actiu un quadre de diàleg modal.
Categories de contingut | Contingut dinàmic, seccionament arrel. |
---|---|
Contingut permès | Contingut dinàmic. |
Omissió de l'etiqueta | Cap, tant l'etiqueta inicial com l’etiqueta final són obligatòries |
Elements pares permesos | Qualsevol element que accepti contingut dinàmic. |
Interfície DOM | HTMLDialogElement |
Atributs
Aquest element inclou els atributs globals. L'atribut tabindex
no ha de ser utilitzat en l'element <dialog>
.
open
- Indica que el diàleg és actiu i disponible per a la interacció. Quan l'atribut obert no està establert, no s'ha de mostrar a l'usuari.
Exemples
Example 1
<dialog open>
<p>Greetings, one and all!</p>
</dialog>
Example 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>
Especificacions
Especificació | Estat | Comentari |
---|---|---|
HTML Living Standard The definition of '<dialog>' in that specification. |
Living Standard | |
HTML 5.1 The definition of '<dialog>' in that specification. |
Recommendation | Definició inicial |
Navegadors compatibles
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Suport bàsic | 37 | No support[1] | No support | 24 | No support |
Punts d'ancoratge | No support | No support | No support | No support | No support |
Característica | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 37 | No support | No support | No support | No support |
Punts d'ancoratge | No support | No support | No support | No support | No support |
[1] See errada 840640.
Veure
- L'event
close
- L'event
cancel
- Guía formularis HTML.