From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/html/element/dialog/index.html | 166 ++++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/fr/web/html/element/dialog/index.html (limited to 'files/fr/web/html/element/dialog') diff --git a/files/fr/web/html/element/dialog/index.html b/files/fr/web/html/element/dialog/index.html new file mode 100644 index 0000000000..e748648f51 --- /dev/null +++ b/files/fr/web/html/element/dialog/index.html @@ -0,0 +1,166 @@ +--- +title: ' : l''élément de boîte de dialogue' +slug: Web/HTML/Element/dialog +tags: + - Element + - Experimental + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/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).

+ +

Attributes

+ +

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

+ +
+
{{htmlattrdef("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

+ + + +

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

+ +

{{EmbedLiveSample("Exemples","400","500")}}

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, racine de sectionnement.
Contenu autoriséContenu de flux.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément qui accepte du contenu de flux.
Rôles ARIA autorisés{{ARIARole("alertdialog")}}
Interface DOM{{domxref("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ÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.dialog")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf