Balise HTML `<dialog>`

La balise <dialog> fait partie des éléments HTML5. Elle est utilisée pour créer une boîte de dialogue native avec laquelle l'utilisateur interagit et effectue certaines actions. Par exemple, vous pouvez créer des messages contextuels ou des formulaires avec cet élément. La boîte de dialogue est masquée par défaut. Elle devient visible lorsque l'attribut open est défini.

Pour afficher ou masquer le contenu, nous avons besoin de l'API JavaScript.

Si des éléments <form> sont spécifiés avec l'attribut method="dialog", ils peuvent être regroupés au sein d'une boîte de dialogue. Si un tel formulaire est fourni, la boîte de dialogue se ferme lors de la soumission du formulaire, et la propriété returnValue stocke la valeur du bouton cliqué.

Pour styliser l'arrière-plan de l'élément <dialog>, vous pouvez utiliser le pseudo-élément CSS ::backdrop.

Syntaxe

La balise <dialog> s'utilise par paires. Le contenu est écrit entre la balise d'ouverture (<dialog>) et la balise de fermeture (</dialog>).

Exemple de la balise HTML `<dialog>` :

Balise HTML <dialog>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      dialog {
        width: 40%;
      }
    </style>
  </head>
  <body>
    <div>
      <dialog id="DialogExample">
        <p>
          Here is some text for example.
        </p>
        <button id="hide">Close dialog text</button>
      </dialog>
      <button id="show">Show dialog text</button>
    </div>
    <script type="text/javascript">
      (function() { var dialog = document.getElementById('DialogExample'); document.getElementById('show').onclick = function() { dialog.showModal(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })();
    </script>
  </body>
</html>

Try it Yourself »

Résultat

exemple de boîte de dialogue

Attributs

Attribut	Valeur	Description
open	open	Indique que la boîte de dialogue est active et que l'utilisateur peut interagir avec elle.

La balise <dialog> prend également en charge les Attributs globaux et les Attributs d'événement.

Comment styliser une balise HTML <dialog>

Vous pouvez personnaliser l'apparence de la boîte de dialogue et sa superposition d'arrière-plan à l'aide de CSS. Le pseudo-élément ::backdrop cible la zone située derrière la boîte de dialogue.

css

dialog {
  border: 1px solid #ccc;
  border-radius: 0.5em;
  padding: 1em;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

Note sur les méthodes JavaScript : L'exemple utilise dialog.showModal(), qui affiche la boîte de dialogue comme modale (bloquant l'interaction avec le reste de la page). Pour afficher une boîte de dialogue non modale qui permet l'interaction avec d'autres éléments, utilisez plutôt dialog.show().

Pratique

Quels attributs la balise HTML <dialog> prend-elle en charge ?

<open> : Cet attribut booléen indique que la boîte de dialogue est accessible et/ ou interactive.<modal> : Cet attribut nécessite une interaction utilisateur, empêchant ainsi toute interaction avec le reste de la page web jusqu'à ce que la boîte de dialogue soit fermée.La balise <dialog> ne prend en charge aucun attribut.<returnValue> : Contrairement à open et showModal(), cela ne reflète pas un attribut de contenu et son rôle est de conserver une chaîne qui peut être générée et utilisée lorsque la boîte de dialogue est fermée.

Balise HTML <dialog> ​

Syntaxe ​

Exemple de la balise HTML <dialog> : ​

Résultat ​