<dialog>

Résumé

L'élément HTML <dialog> représente une boite de dialogue ou un composant interactif, comme un inspecteur ou une fenêtre. L'élément <form> peut être intégré dans une boîte de dialogue en spécifiant l'attribut method="dialog". Quand un formulaire est soumis, le dialogue est fermé avec un attribut returnValue mis à jour avec la valeur value du bouton de soumission utilisé.

Le pseudo-élément CSS ::backdrop peut être utilisé pour mettre en forme l'arrière plan d'un élément <dialog>, par exemple pour estomper un contenu inaccessible pendant que la boîte de dialogue est active.

• Catégories de contenu Contenu de flux, racine de section.
• Contenu autorisé Contenu de flux.
• Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
• Éléments parents autorisés Tout élément acceptant du contenu de flux.
• Interface DOM HTMLDialogElement

Attributes

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

open

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.

Exemples

Exemple 1

<dialog open>
  <p>Salutations tout le monde&nbsp;!</p>
</dialog>

Exemple 2

<!-- Simple boîte de dialogue, contenant un formulaire -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p><label for="favAnimal">Animal favori :</label>
      <select id="favAnimal" name="favAnimal">
        <option></option>
        <option>Crevette de saumure</option>
        <option>Panda roux</option>
        <option>Singe-araignée</option>
      </select></p>
    </section>
    <menu>
      <button id="cancel" type="reset">Annuler</button>
      <button type="submit">Confirmer</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Envoyer détails</button>
</menu>

<script>
  (function() {
    var updateButton = document.getElementById('updateDetails');
    var cancelButton = document.getElementById('cancel');

    // Update button opens a modal dialog
    updateButton.addEventListener('click', function() {
      document.getElementById('favDialog').showModal();
    });

    // Bouton pour fermer la boîte de dialogue
    cancelButton.addEventListener('click', function() {
      document.getElementById('favDialog').close();
    });

  })();
</script>

Spécifications

Compatibilité des navigateurs

Voir aussi

• Guide sur les formulaires HTML