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

Catégories de contenu Contenu de flux, racine de sectionnement.
Contenu autorisé Contenu de flux.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu de flux.
Rôles ARIA autorisés alertdialog
Interface DOM HTMLDialogElement

Prothèse d'émulation (polyfill)

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

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<dialog>' dans cette spécification.
Standard évolutif  
HTML 5.2
La définition de '<dialog>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
dialogChrome Support complet 37Edge Aucun support NonFirefox Support complet 53
Notes Désactivée
Support complet 53
Notes Désactivée
Notes See bug 840640.
Désactivée From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Aucun support NonWebView Android Support complet 37Chrome Android Support complet 37Edge Mobile Aucun support NonFirefox Android Support complet 53
Notes Désactivée
Support complet 53
Notes Désactivée
Notes See bug 840640.
Désactivée From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
openChrome Support complet 37Edge Aucun support NonFirefox Support complet 53
Notes Désactivée
Support complet 53
Notes Désactivée
Notes See bug 840640.
Désactivée From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 24Safari Aucun support NonWebView Android Support complet 37Chrome Android Support complet 37Edge Mobile Aucun support NonFirefox Android Support complet 53
Notes Désactivée
Support complet 53
Notes Désactivée
Notes See bug 840640.
Désactivée From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, J.DMB, KkFalse2, louuis
Dernière mise à jour par : SphinxKnight,