diff options
Diffstat (limited to 'files/fr/web/api/htmldialogelement/close_event/index.md')
-rw-r--r-- | files/fr/web/api/htmldialogelement/close_event/index.md | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/files/fr/web/api/htmldialogelement/close_event/index.md b/files/fr/web/api/htmldialogelement/close_event/index.md new file mode 100644 index 0000000000..e2a81f2a09 --- /dev/null +++ b/files/fr/web/api/htmldialogelement/close_event/index.md @@ -0,0 +1,110 @@ +--- +title: 'HTMLDialogElement: close event' +slug: Web/API/HTMLDialogElement/close_event +tags: + - API + - DOM HTML + - Evènement + - HTMLDialogElement + - Reference + - close + - fermeture +translation_of: Web/API/HTMLDialogElement/close_event +--- +<p>{{ APIRef() }}</p> + +<p>L'événement <strong><code>close</code></strong> est déclenché sur un objet {{domxref ("HTMLDialogElement")}} lorsque la boîte de dialogue qu'il représente a été fermée.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bouillonnant</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Propriété du gestionnaire d'événements</th> + <td>{{domxref ("GlobalEventHandlers/onclose", "onclose")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_concret">Exemple concret</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><dialog class="example-dialog"> + <button class="close" type="reset">Close</button> +</dialog> + +<button class="open-dialog">Open dialog</button> + +<div class="result"></div></pre> + +<pre class="brush: css hidden">button, div { + margin: .5rem; +} +</pre> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const result = document.querySelector('.result') + +const dialog = document.querySelector('.example-dialog') +dialog.addEventListener('close', (event) => { + result.textContent = 'dialog was closed' +}) + +const openDialog = document.querySelector('.open-dialog') +openDialog.addEventListener('click', () => { + if (typeof dialog.showModal === 'function') { + dialog.showModal() + result.textContent = '' + } else { + result.textContent = 'The dialog API is not supported by this browser' + } +}) + +const closeButton = document.querySelector('.close') +closeButton.addEventListener('click', () => { + dialog.close() +}) +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{ EmbedLiveSample('Exemple_concret', '100%', '100px') }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG', 'indices.html#event-close', 'close') }}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.HTMLDialogElement.close_event")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li>Élément HTML <code><a href="/en-US/docs/Web/HTML/Element/dialog"><dialog></a></code></li> +</ul> |