<dialog>

This translation is incomplete. Please help translate this article from English.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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
WHATWG HTML Living Standard
The definition of '<dialog>' in that specification.
Living Standard  
HTML5.1
The definition of '<dialog>' in that specification.
Working Draft Definició inicial

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

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,