1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
---
title: '<dialog> : 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
---
<div>{{HTMLRef}}</div>
<p>L'élément HTML <code><strong><dialog></strong></code> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).</p>
<h2 id="Attributes">Attributes</h2>
<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>. L'attribut <code>tabindex</code> ne doit pas être utilisé sur l'élément <code><dialog></code>.</p>
<dl>
<dt>{{htmlattrdef("open")}}</dt>
<dd>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.</dd>
</dl>
<h2 id="Notes">Notes</h2>
<ul>
<li>L'élément <code><form></code> peut être intégré dans une boîte de dialogue en spécifiant l'attribut <code><code>method="dialog</code>"</code>. Lorsqu'un formulaire de ce type est envoyé, la boîte de dialogue est fermée avec un attribut {{domxref("HTMLDialogElement.returnValue", "returnValue")}} mis à jour avec la valeur <code>value</code> du bouton d'envoi utilisé.</li>
<li>Le pseudo-élément CSS {{cssxref('::backdrop')}} peut être utilisé pour mettre en forme l'arrière plan d'un élément <code><dialog></code>. 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 <code><dialog></code> est affiché via {{domxref("HTMLDialogElement.showModal()")}}.</li>
</ul>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">(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 + " !";
});
})();
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","400","500")}}</p>
<h2 id="Résumé_technique">Résumé technique</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
<td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement"> racine de sectionnement</a>.</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>{{ARIARole("alertdialog")}}</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLDialogElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
<p>Cette prothèse peut être utilisée pour fournir un support pour les navigateurs : <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>.</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td>
<td>{{Spec2('HTML5.2')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("html.elements.dialog")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>L'évènement {{event("close")}}</li>
<li>L'évènement {{event("cancel")}}</li>
<li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li>
<li>Le pseudo-élément {{cssxref("::backdrop")}}</li>
</ul>
|
