<dialog> : l'élément de boîte de dialogue

L'élément HTML <dialog> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).

Attributes

Cet élément inclut les attributs universels. L'attribut tabindex ne doit pas être utilisé sur l'élément <dialog>.

open

Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.

Notes

• L'élément <form> peut être intégré dans une boîte de dialogue en spécifiant l'attribut method="dialog". Lorsqu'un formulaire de ce type est envoyé, la boîte de dialogue est fermée avec un attribut  returnValue mis à jour avec la valeur value du bouton d'envoi utilisé.
• Le pseudo-élément CSS ::backdrop peut être utilisé pour mettre en forme l'arrière plan d'un élément <dialog>. On peut par exemple estomper un contenu inaccessible pendant que la boîte de dialogue est active. Cette ombre portée est uniquement dessinée lorsque l'élément <dialog> est affiché via HTMLDialogElement.showModal().

Exemples

HTML

<!-- Une boîte de dialogue qui contient un formulaire -->
<dialog id="favDialog">
  <form method="dialog">
    <p><label>Animal préféré :
      <select>
        <option></option>
        <option>Panda roux</option>
        <option>Macrotus</option>
        <option>Koala</option>
      </select>
    </label></p>
    <menu>
      <button value="cancel">Annuler</button>
      <button id="confirmBtn" value="default">Confirmer</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Mettre à jour les détails</button>
</menu>

<output aria-live="polite"></output>

JavaScript

(function() {
  var updateButton = document.getElementById('updateDetails');
  var favDialog = document.getElementById('favDialog');
  var outputBox = document.getElementsByTagName('output')[0];
  var selectEl = document.getElementsByTagName('select')[0];
  var confirmBtn = document.getElementById('confirmBtn');

  // Le bouton "mettre à jour les détails" ouvre la boîte de dialogue
  updateButton.addEventListener('click', function onOpen() {
    if (typeof favDialog.showModal === "function") {
      favDialog.showModal();
    } else {
      console.error("L'API dialog n'est pas prise en charge par votre navigateur");
    }
  });
  // Le champ "animal préféré" définit la valeur pour le bouton submit
  selectEl.addEventListener('change', function onSelect(e) {
    confirmBtn.value = selectEl.value;
  });
  // Le bouton "Confirmer" déclenche l'évènement "close" sur le dialog avec [method="dialog"]
  favDialog.addEventListener('close', function onClose() {
    outputBox.value = "Vous avez cliqué sur le bouton " + favDialog.returnValue + " !";
  });
})();

Résultat

Résumé technique

Prothèse d'émulation (polyfill)

Cette prothèse peut être utilisée pour fournir un support pour les navigateurs : dialog-polyfill.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'évènement close
• L'évènement cancel
• Guide sur les formulaires HTML
• Le pseudo-élément ::backdrop