<dialog>

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.

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.

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

<!-- 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>

[1] See errada 840640.

• L'event close
• L'event cancel
• Guía formularis HTML.