--- title: ' : l''élément de boîte de dialogue' slug: Web/HTML/Element/dialog tags: - Dialog - Element - HTML - HTML interactive elements - Reference - Web - polyfill translation_of: Web/HTML/Element/dialog browser-compat: html.elements.dialog ---
{{HTMLRef}}

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

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ôle ARIA implicite dialog
Rôles ARIA autorisés alertdialog
Interface DOM HTMLDialogElement

Attributs

Cet élément inclut les attributs universels.

Attention : 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 d'utilisation

Exemples

Exemple simple

<dialog open>
  <p>Salutations, à tous et à toutes !</p>
</dialog>

Exemple avancé

HTML

<!-- Boîte de dialogue contextuelle simple contenant un formulaire -->
<dialog id="favDialog">
  <form method="dialog">
    <p><label>Animal préféré :
      <select>
        <option></option>
        <option>Crevette en saumure</option>
        <option>Panda rouge</option>
        <option>Singe-araignée</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

let updateButton = document.getElementById('updateDetails');
let favDialog = document.getElementById('favDialog');
let outputBox = document.querySelector('output');
let selectEl = document.querySelector('select');
let confirmBtn = document.getElementById('confirmBtn');

// Le bouton "Mettre à jour les détails" ouvre le <dialogue> ; modulaire
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 ce navigateur.");
  }
});
// L'entrée "Animal favori" définit la valeur du bouton d'envoi.
selectEl.addEventListener('change', function onSelect(e) {
  confirmBtn.value = selectEl.value;
});
// Le bouton "Confirmer" du formulaire déclenche la fermeture
// de la boîte de dialogue en raison de [method="dialog"]
favDialog.addEventListener('close', function onClose() {
  outputBox.value = favDialog.returnValue + " bouton cliqué - " + (new Date()).toString();
});

Résultat

{{EmbedLiveSample("advanced_example", "", 300)}}

Spécifications

{{Specifications}}

Compatibilité des navigateurs

{{Compat}}

Prothèse d'émulation (polyfill)

Incluez ce polyfill pour fournir un support aux navigateurs sans élément <dialog> : dialog-polyfill.

Voir aussi