diff options
Diffstat (limited to 'files/fr/web/api/htmldialogelement')
| -rw-r--r-- | files/fr/web/api/htmldialogelement/close_event/index.html | 116 | ||||
| -rw-r--r-- | files/fr/web/api/htmldialogelement/index.html | 148 |
2 files changed, 264 insertions, 0 deletions
diff --git a/files/fr/web/api/htmldialogelement/close_event/index.html b/files/fr/web/api/htmldialogelement/close_event/index.html new file mode 100644 index 0000000000..b3708752ef --- /dev/null +++ b/files/fr/web/api/htmldialogelement/close_event/index.html @@ -0,0 +1,116 @@ +--- +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><span class="seoSummary">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</span></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 notranslate"><dialog class="example-dialog"> + <button class="close" type="reset">Close</button> +</dialog> + +<button class="open-dialog">Open dialog</button> + +<div class="result"></div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">button, div { + margin: .5rem; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js notranslate">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> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<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> diff --git a/files/fr/web/api/htmldialogelement/index.html b/files/fr/web/api/htmldialogelement/index.html new file mode 100644 index 0000000000..7a5458bf48 --- /dev/null +++ b/files/fr/web/api/htmldialogelement/index.html @@ -0,0 +1,148 @@ +--- +title: HTMLDialogElement +slug: Web/API/HTMLDialogElement +tags: + - API + - Experimental + - HTML DOM + - HTMLDialogElement + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLDialogElement +--- +<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div> + +<p>The <strong><code>HTMLDialogElement</code></strong> interface provides methods to manipulate {{HTMLElement("dialog")}} elements. It inherits properties and methods from the {{domxref("HTMLElement")}} interface.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLDialogElement.open")}}</dt> + <dd>A {{domxref("Boolean")}} reflecting the {{htmlattrxref("open", "dialog")}} HTML attribute, indicating whether the dialog is available for interaction.</dd> + <dt>{{domxref("HTMLDialogElement.returnValue")}}</dt> + <dd>A {{domxref("DOMString")}} that sets or returns the return value for the dialog.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLDialogElement.close()")}}</dt> + <dd>Closes the dialog. An optional {{domxref("DOMString")}} may be passed as an argument, updating the <code>returnValue</code> of the the dialog.</dd> + <dt>{{domxref("HTMLDialogElement.show()")}}</dt> + <dd>Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog.</dd> + <dt>{{domxref("HTMLDialogElement.showModal()")}}</dt> + <dd>Displays the dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt>{{domxref("HTMLDialogElement/close_event", "close")}}</dt> + <dd>Fired when the dialog is closed.<br> + Also available via the {{domxref("GlobalEventHandlers/onclose", "onclose")}} property.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. From there you can click the <em>Cancel</em> button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button.</p> + +<pre class="brush: html notranslate"> <!-- Simple pop-up dialog box, containing a form --> + <dialog id="favDialog"> + <form method="dialog"> + <section> + <p><label for="favAnimal">Favorite animal:</label> + <select id="favAnimal" name="favAnimal"> + <option></option> + <option>Brine shrimp</option> + <option>Red panda</option> + <option>Spider monkey</option> + </select></p> + </section> + <menu> + <button id="cancel" type="reset">Cancel</button> + <button type="submit">Confirm</button> + </menu> + </form> + </dialog> + + <menu> + <button id="updateDetails">Update details</button> + </menu> + + <script> + (function() { + var updateButton = document.getElementById('updateDetails'); + var cancelButton = document.getElementById('cancel'); + var dialog = document.getElementById('favDialog'); + dialog.returnValue = 'favAnimal'; + + function openCheck(dialog) { + if(dialog.open) { + console.log('Dialog open'); + } else { + console.log('Dialog closed'); + } + } + + // Update button opens a modal dialog + updateButton.addEventListener('click', function() { + dialog.showModal(); + openCheck(dialog); + }); + + // Form cancel button closes the dialog box + cancelButton.addEventListener('click', function() { + dialog.close('animalNotChosen'); + openCheck(dialog); + }); + + })(); + </script></pre> + +<div class="note"> +<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#htmldialogelement', 'HTMLDialogElement')}}</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>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLDialogElement")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The HTML element implementing this interface: {{ HTMLElement("dialog") }}.</li> +</ul> |