L'élémentHTML<dialog> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).

L'élément HTML<dialog> est utilisé pour créer des boîtes de dialogue modale qui peuvent être interactives ou non. Les boîtes de dialogue modale interrompent l'interaction, le reste de la page étant inerte, tandis que les boîtes de dialogue non-modale permettent une interaction avec le reste de la page.

JavaScript peut être utilisé pour afficher l'élément<dialog>. L'utilisation de la méthode.showModal() pour afficher une boîte de dialogue modale et la méthode.show() pour afficher une boîte de dialogue non-modale. La boîte de dialogue peut être fermée à l'aide de la méthode.close() ou en utilisant la méthodedialog lors de la soumission d'un formulaire<form> imbriqué dans l'élément<dialog>. Les boîtes de dialogue modales peuvent également être fermées en appuyant sur la toucheÉchap.

Attributs

Cet élément inclut lesattributs universels.

closedby

Définit les types d'actions utilisateur·ice qui peuvent être utilisées pour fermer l'élément<dialog>. Cet attribut distingue trois méthodes de fermeture :

• Uneaction de rejet léger, où le<dialog> est fermé lorsque l'utilisateur·ice clique ou appuie à l'extérieur de la boîte de dialogue. Cela équivaut au comportement« rejet léger » des fenêtres contextuelles en état « auto ».
• Uneaction spécifique à la plateforme, comme l'appui sur la toucheÉchap sur les plateformes de bureau, ou un geste « retour » ou « fermer » sur les plateformes mobiles.
• Un mécanisme défini par le·la développeur·euse, tel qu'un<button> avec un gestionnaireclick qui appelleHTMLDialogElement.close() ou la soumission d'un<form>.

Valeurs possibles :

• any
  • : Le dialogue peut être fermé par n'importe laquelle des trois méthodes.
• closerequest
  • : Le dialogue peut être fermé par une action spécifique à la plateforme ou un mécanisme défini par le·la développeur·euse.
• none
• : Le dialogue ne peut être fermé que par un mécanisme défini par le·la développeur·euse.

Si l'élément<dialog> ne possède pas de valeurclosedby valide :

• s'il a été ouvert avecshowModal(), il se comporte comme si la valeur était"closerequest"
• sinon, il se comporte comme si la valeur était"none"

open

Indique que la boîte de dialogue est active et disponible pour l'interaction. Si l'attributopen n'est pas présent, la boîte de dialogue n'est pas visible pour l'utilisateur·ice.Il est recommandé d'utiliser les méthodes.show() ou.showModal() pour afficher les dialogues, plutôt que l'attributopen. Si un<dialog> est ouvert avec l'attributopen, il est non-modal.

Note :Bien qu'il soit possible d'alterner entre les états ouvert et fermé d'une boîte de dialogue non-modale en ajoutant ou retirant l'attributopen, cette approche n'est pas recommandée. Voiropen pour plus d'informations.

Notes d'utilisation

• Les éléments<form> peuvent fermer un dialogue s'ils possèdent l'attributmethod="dialog" ou si le bouton utilisé pour soumettre le formulaire a l'attributformmethod="dialog". Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriétéreturnValue définie sur lavalue (valeur) du bouton qui a été utilisé pour soumettre le formulaire.
• Le pseudo-élément CSS::backdrop peut être utilisé pour créer un style derrière un élément<dialog> lorsque le dialogue est affiché avecHTMLDialogElement.showModal(). Par exemple, pour atténuer le contenu inaccessible derrière la boîte de dialogue modale.
• L'attributautofocus peut être ajouté à l'élément avec lequel la personne est censée interagir immédiatement après l'ouverture d'une boîte de dialogue modale. S'il n'y a pas d'élément impliquant une interaction immédiate, l'attributautofocus peut être ajouté à l'élément<dialog> lui-même.
• Ne pas ajouter l'attributtabindex à l'élément<dialog> car il n'est pas interactif et ne reçoit pas la sélection. Le contenu du dialogue, y compris le bouton de fermeture contenu dans le dialogue, peut recevoir la sélection et être interactif.

Accessibilité

Lors de l'implémentation d'une fenêtre de dialogue, il est important de considérer l'endroit le plus approprié pour placer le point de sélection de la personne. Lorsque l'on utiliseHTMLDialogElement.showModal() pour ouvrir un<dialog>, la sélection est placée sur le premier élément imbriqué pouvant recevoir la sélection. Indiquer explicitement l'emplacement initial de la sélection à l'aide de l'attributautofocus permet de s'assurer que la sélection initiale est placée sur l'élément considéré comme le meilleur emplacement initial pour un dialogue particulier. En cas de doute, comme il n'est pas toujours possible de savoir où la sélection initiale peut être placée dans un dialogue, en particulier dans les cas où le contenu d'un dialogue est rendu dynamiquement lorsqu'il est invoqué, l'élément<dialog> lui-même peut fournir le meilleur emplacement initial.

Veillez à ce qu'un mécanisme soit prévu pour permettre de fermer la boîte de dialogue. La meilleure façon de s'assurer que toutes les personnes peuvent fermer la boîte de dialogue est d'inclure un bouton explicite à cet effet, tel qu'un bouton de confirmation, d'annulation ou de fermeture.

Par défaut, une boîte de dialogue invoquée par la méthodeshowModal() peut être fermée en appuyant sur la toucheÉchap. Une boîte de dialogue non-modale ne se ferme pas par la toucheÉchap par défaut, et selon ce que représente la boîte de dialogue non-modale, ce comportement n'est peut-être pas souhaitable. Les utilisateur·ice·s de clavier s'attendent à ce que la toucheÉchap ferme les boîtes de dialogue modales ; veillez à ce que ce comportement soit implémenté et maintenu. Si plusieurs boîtes de dialogue modales sont ouvertes, l'appui sur la toucheÉchap ne doit fermer que la dernière boîte de dialogue affichée. Lorsque l'on utilise<dialog>, ce comportement est fourni par le navigateur.

Bien que les boîtes de dialogue puissent être créées à l'aide d'autres éléments, l'élément natif<dialog> offre des caractéristiques d'utilisation et d'accessibilité qui doivent être reproduites si vous utilisez d'autres éléments dans un but similaire. Si vous créez une implémentation de dialogue personnalisée, assurez-vous que tous les comportements par défaut attendus sont pris en charge et que les recommandations d'étiquetage appropriées sont suivies.

L'élément<dialog> est exposé par les navigateurs d'une manière similaire aux dialogues personnalisés qui utilisent l'attribut ARIArole="dialog". Les éléments<dialog> invoqués par la méthodeshowModal() ont implicitementaria-modal="true", alors que les éléments<dialog> invoqués par la méthodeshow() ou affichés en utilisant l'attributopen ou en changeant la propriété CSSdisplay par défaut d'un élément HTML<dialog> sont exposés en tant que[aria-modal="false"]. Lors de l'implémentation de dialogues modaux, tout ce qui n'est pas le<dialog> et son contenu doit être rendu inerte en utilisant l'attribut HTML universelinert. Lorsque l'on utilise<dialog> avec la méthodeHTMLDialogElement.showModal(), ce comportement est fourni par le navigateur.

Exemples

Dialogue uniquement en HTML

Cet exemple montre la création d'une boîte de dialogue non-modale en utilisant uniquement du HTML. Grâce à l'attribut booléenopen de l'élément<dialog>, la boîte de dialogue apparaît ouverte au chargement de la page. Le dialogue peut être fermé en cliquant sur le bouton « OK » car l'attributmethod de l'élément<form> est fixé à"dialog". Dans ce cas, aucun JavaScript n'est nécessaire pour fermer le formulaire.

<dialog open>  <p>Salutations, à toutes et à tous&nbsp;!</p>  <form method="dialog">    <button>OK</button>  </form></dialog>

Résultat

Cette boîte de dialogue est initialement ouverte en raison de la présence de l'attributopen. Les boîtes de dialogue affichées à l'aide de l'attributopen sont non-modales. Après avoir cliqué sur « OK », la boîte de dialogue est fermée, laissant le cadre de résultat vide. Lorsque la boîte de dialogue est fermée, aucune méthode n'est prévue pour la rouvrir. C'est pourquoi la méthode préférée pour afficher les boîtes de dialogue non-modales consiste à utiliser la méthodeHTMLDialogElement.show(). Il est possible de basculer l'affichage de la boîte de dialogue en ajoutant ou en retirant l'attribut booléenopen, mais ce n'est pas la pratique recommandée.

Création d'une boîte de dialogue modale

Cet exemple montre une boîte de dialogue modale avec unarrière-plan en dégradé. La méthode.showModal() ouvre la boîte de dialogue modale lorsque le bouton « Afficher la fenêtre » est activé. La boîte de dialogue peut être fermée en appuyant sur la toucheÉchap ou via la méthodeclose() lorsque le bouton « Fermer » de la boîte de dialogue est activé.

Lorsqu'une boîte de dialogue s'ouvre, le navigateur donne, par défaut, la sélection au premier élément pouvant la recevoir dans la boîte de dialogue. Dans cet exemple, l'attributautofocus est appliqué au bouton « Fermer », lui donnant la sélection à l'ouverture de la boîte de dialogue, car c'est l'élément avec lequel nous nous attendons à ce que la personne interagisse immédiatement après l'ouverture.

HTML

<dialog>  <button autofocus>Fermer</button>  <p>Cette boîte de dialogue modale a un arrière-plan festif&nbsp;!</p></dialog><button>Afficher la fenêtre</button>

CSS

Nous pouvons styliser l'arrière-plan du dialogue en utilisant le pseudo-élément::backdrop.

::backdrop {  background-image: linear-gradient(    45deg,    magenta,    rebeccapurple,    dodgerblue,    green  );  opacity: 0.75;}

JavaScript

Le dialogue est ouvert de façon modale en utilisant la méthode.showModal() et fermé en utilisant la méthode.close().

const dialog = document.querySelector("dialog");const showButton = document.querySelector("dialog + button");const closeButton = document.querySelector("dialog button");// Le bouton "Afficher la fenêtre" ouvre le dialogueshowButton.addEventListener("click", () => {  dialog.showModal();});// Le bouton "Fermer" ferme le dialoguecloseButton.addEventListener("click", () => {  dialog.close();});

Résultat

Lorsque la boîte de dialogue modale est affichée, elle apparaît au-dessus de toutes les autres boîtes de dialogue éventuellement présentes. Tout ce qui se trouve en dehors de la boîte de dialogue modale est inerte et les interactions en dehors de cette dernière sont bloquées. Remarquez que lorsque la boîte de dialogue est ouverte, à l'exception d'elle-même, il n'est pas possible d'interagir avec le document ; le bouton « Afficher la fenêtre » est en grande partie masqué par l'arrière-plan presque opaque de la boîte de dialogue et est inerte.

Traitement de la valeur de retour d'une boîte de dialogue

Cet exemple illustre la propriétéreturnValue de l'élément<dialog> et la fermeture d'une boîte de dialogue modale à l'aide d'un formulaire. Par défaut, la valeur de retour est la chaîne vide ou la valeur du bouton qui soumet le formulaire dans l'élément<dialog>, s'il y en a un.

Cet exemple ouvre une boîte de dialogue modale lorsque le bouton « Afficher la fenêtre » est activé. La boîte de dialogue contient un formulaire avec un<select> et deux<button>, dont la valeur par défaut esttype="submit". Un écouteur d'évènement met à jour la valeur du bouton « Confirmer » lorsque l'option sélectionnée change. Si le bouton « Confirmer » est activé pour fermer la boîte de dialogue, la valeur actuelle du bouton est la valeur de retour. Si la boîte de dialogue est fermée en appuyant sur le bouton « Annuler », la valeur de retourreturnValue estcancel.

Lorsque le dialogue est fermé, la valeur de retour est affichée sous le bouton « Afficher la fenêtre ». Si le dialogue est fermé en appuyant sur la toucheÉchap, la valeur de retourreturnValue n'est pas mise à jour et l'événementclose ne se produit pas, ce qui signifie que le texte dans l'élément<output> n'est pas mis à jour.

HTML

<!-- Boîte de dialogue modale contenant un formulaire --><dialog>  <form>    <p>      <label>        Animal préféré&nbsp;:        <select>          <option value="default">Choisissez…</option>          <option>Crevette en saumure</option>          <option>Panda rouge</option>          <option>Singe-araignée</option>        </select>      </label>    </p>    <div>      <button value="cancel" formmethod="dialog">Annuler</button>      <button value="default">Confirmer</button>    </div>  </form></dialog><p>  <button>Afficher la fenêtre</button></p><output></output>

JavaScript

const showButton = document.getElementById("showDialog");const favDialog = document.getElementById("favDialog");const outputBox = document.querySelector("output");const selectEl = favDialog.querySelector("select");const confirmBtn = favDialog.querySelector("#confirmBtn");// Le bouton "Afficher la fenêtre" ouvre la boîte de dialogue modaleshowButton.addEventListener("click", () => {  favDialog.showModal();});// Le bouton "Annuler" ferme la boîte de dialogue sans soumettre le formulaire grâce à [formmethod="dialog"], ce qui déclenche un événement de fermeture.favDialog.addEventListener("close", (e) => {  outputBox.value =    favDialog.returnValue === "default"      ? "Pas de valeur retournée."      : `Valeur retournée : ${favDialog.returnValue}.`; // Vérifie la présence de "default" au lieu d'une chaîne vide});// Empêche le bouton "Confirmer" de soumettre le formulaire par défaut et ferme la boîte de dialogue avec la méthode `close()`, ce qui déclenche l'événement "close".confirmBtn.addEventListener("click", (event) => {  event.preventDefault(); // Nous ne voulons pas soumettre ce faux formulaire  favDialog.close(selectEl.value); // Il faut envoyer la valeur du sélecteur ici.});

Résultat

Les exemples ci-dessus présentent les trois méthodes suivantes pour fermer les boîtes de dialogue modales :

• En soumettant le formulaire dans la boîte de dialogue à l'aide de la méthodedialog (comme dans l'exemple uniquement HTML).
• En appuyant sur la toucheÉchap.
• En appelant la méthodeHTMLDialogElement.close() (comme dans l'exemple de boîte modale).Dans cet exemple, le bouton « Annuler » ferme la boîte de dialogue via la méthode de formulairedialog et le bouton « Confirmer » ferme la boîte de dialogue via la méthodeHTMLDialogElement.close().

Le bouton « Annuler » comprend l'attributformmethod="dialog", qui remplace la méthode par défaut<form>GET. Lorsque la méthode d'un formulaire estdialog, l'état du formulaire est sauvegardé mais non soumis, et la boîte de dialogue est fermée.

Sansaction, la soumission du formulaire via la méthode par défautGET entraîne le rechargement de la page. Nous utilisons JavaScript pour empêcher la soumission et fermer le dialogue avec les méthodesevent.preventDefault() etHTMLDialogElement.close(), respectivement.

Il est important de prévoir un mécanisme de fermeture dans chaque élément<dialog>. La toucheÉchap ne ferme pas les dialogues non modaux par défaut, et l'on ne peut pas non plus supposer que la personne aura accès à un clavier physique (par exemple, une personne utilisant un écran tactile sans accès à un clavier).

Fermer un dialogue contenant un champ requis

Lorsqu'un formulaire à l'intérieur d'un dialogue contient un champ requis, l'agent utilisateur n'autorisera la fermeture du dialogue que si une valeur est fournie pour ce champ requis. Pour fermer un tel dialogue, utilisez soit l'attributformnovalidate sur le bouton de fermeture, soit appelez la méthodeclose() sur l'objet dialogue lorsque le bouton de fermeture est cliqué.

<dialog>  <form method="dialog">    <p>      <label>        Animal préféré&nbsp;:        <input type="text" required />      </label>    </p>    <div>      <input type="submit" value="Fermeture normale" />      <input        type="submit"               value="Fermeture sans validation"        formnovalidate />      <input type="submit" value="Fermeture JS" />    </div>  </form></dialog><p>  <button>Afficher la fenêtre</button></p><output></output>

[type="submit"] {  margin-right: 1rem;}

JavaScript

const showBtn = document.getElementById("show-dialog");const dialog = document.getElementById("dialog");const jsCloseBtn = dialog.querySelector("#js-close");showBtn.addEventListener("click", () => {  dialog.showModal();});jsCloseBtn.addEventListener("click", (e) => {  e.preventDefault();  dialog.close();});

Résultat

D'après la sortie, il est impossible de fermer le dialogue en utilisant le boutonFermeture normale. En revanche, le dialogue peut être fermé si l'on contourne la validation du formulaire en utilisant l'attributformnovalidate sur le boutonFermeture sans validation. Le code peut aussi appelerdialog.close() pour fermer ce type de dialogue.

Comparaison des comportements selon la valeur declosedby

Cet exemple illustre la différence de comportement entre les différentes valeurs de l'attributclosedby.

HTML

Nous fournissons trois éléments<button> et trois éléments<dialog>. Chaque bouton ouvre un dialogue différent qui illustre le comportement d'une des trois valeurs de l'attributclosedby :none,closerequest etany. Notez que chaque élément<dialog> contient un bouton<button> qui sert à le fermer.

<p>Choisissez un type de <code>&lt;dialog&gt;</code>&nbsp;:</p><div>  <button><code>closedby="none"</code></button>  <button>    <code>closedby="closerequest"</code>  </button>  <button><code>closedby="any"</code></button></div><dialog closedby="none">  <h2><code>closedby="none"</code></h2>  <p>    Fermeture possible uniquement via un mécanisme prévu, dans ce cas en    appuyant sur le bouton «&nbsp;Fermer&nbsp;» ci‑dessous.  </p>  <button>Fermer</button></dialog><dialog closedby="closerequest">  <h2><code>closedby="closerequest"</code></h2>  <p>    Fermeture possible avec le bouton «&nbsp;Fermer&nbsp;» ou la touche Échap.  </p>  <button>Fermer</button></dialog><dialog closedby="any">  <h2><code>closedby="any"</code></h2>  <p>    Fermeture possible avec le bouton «&nbsp;Fermer&nbsp;», la touche Échap, ou    en cliquant en dehors du dialogue. Comportement de fermeture par clic à    l'extérieur.  </p>  <button>Fermer</button></dialog>

body {  font-family: sans-serif;}#controls {  display: flex;  justify-content: space-around;}dialog {  width: 480px;  border-radius: 5px;  border-color: rgb(0 0 0 / 0.3);}dialog h2 {  margin: 0;}dialog p {  line-height: 1.4;}

JavaScript

Ici, nous attribuons des variables pour référencer les boutons de contrôle principaux, les éléments<dialog> et les boutons « Fermer » à l'intérieur des dialogues. Nous attachons un écouteur d'événementclick à chaque bouton de contrôle à l'aide deaddEventListener, le gestionnaire d'événement ouvre l'élément<dialog> associé viashowModal(). Nous parcourons ensuite les références aux boutons « Fermer », en affectant à chacun un gestionnaireclick qui ferme son élément<dialog> viaclose().

const noneBtn = document.getElementById("none-btn");const closerequestBtn = document.getElementById("closerequest-btn");const anyBtn = document.getElementById("any-btn");const noneDialog = document.querySelector("[closedby='none']");const closerequestDialog = document.querySelector("[closedby='closerequest']");const anyDialog = document.querySelector("[closedby='any']");const closeBtns = document.querySelectorAll(".close");noneBtn.addEventListener("click", () => {  noneDialog.showModal();});closerequestBtn.addEventListener("click", () => {  closerequestDialog.showModal();});anyBtn.addEventListener("click", () => {  anyDialog.showModal();});closeBtns.forEach((btn) => {  btn.addEventListener("click", () => {    btn.parentElement.close();  });});

Résultat

Le rendu est le suivant :

Essayez de cliquer sur chaque bouton pour ouvrir un dialogue. Le premier ne peut être fermé que par le clic sur son bouton « Fermer ». Le second peut également être fermé via une action spécifique à l'appareil telle que l'appui sur la toucheÉchap. Le troisième présente lecomportement dit de « fermeture légère », il peut donc aussi être fermé en cliquant ou en appuyant en dehors du dialogue.

Animation des boîtes de dialogue

Les éléments<dialog> sont réglés surdisplay: none; lorsqu'ils sont masqués et surdisplay: block; lorsqu'ils sont affichés, et sont retirés / ajoutés de lacouche supérieure ainsi que de l'arbre d'accessibilité. Par conséquent, pour pouvoir animer les éléments<dialog>, la propriétédisplay doit être animable. Lesnavigateurs compatibles animent la propriétédisplay avec une variation dutype d'animation discrète. Concrètement, le navigateur basculera entrenone et une autre valeur dedisplay afin que le contenu animé soit visible pendant toute la durée de l'animation.

Par exemple :

• Lorsqu'on animedisplay denone àblock (ou vers une autre valeur visible dedisplay), la valeur basculera enblock à0% de la durée de l'animation pour être visible pendant toute la durée.
• Lorsqu'on animedisplay deblock (ou d'une autre valeur visible) versnone, la valeur basculera ennone à100% de la durée de l'animation pour rester visible pendant toute la durée.

Transition des éléments de dialogue

Lorsqu'on anime des éléments<dialog> à l'aide de transitions CSS, les fonctionnalités suivantes sont nécessaires :

la règle @@starting-style

Fournit un ensemble de valeurs de départ pour les propriétés appliquées au<dialog> à partir desquelles vous souhaitez effectuer la transition à chaque ouverture. Cela évite des comportements inattendus. Par défaut, les transitions CSS ne se produisent que lorsqu'une propriété change d'une valeur à une autre sur un élément visible ; elles ne sont pas déclenchées lors des premières mises à jour de style d'un élément, ni lorsque la valeur dedisplay passe denone à une autre.

la propriétédisplay

Ajoutezdisplay à la liste des transitions afin que le<dialog> reste endisplay: block (ou toute autre valeur visible dedisplay définie pour l'état ouvert) pendant la durée de la transition, garantissant ainsi la visibilité des autres transitions.

la propriétéoverlay

Incluezoverlay dans la liste des transitions pour que le retrait du<dialog> de la couche supérieure soit différé jusqu'à la fin de la transition, assurant ainsi la visibilité de la transition.

la propriététransition-behavior

Définisseztransition-behavior: allow-discrete sur les transitionsdisplay etoverlay (ou via le raccourcitransition) pour permettre des transitions discrètes sur ces deux propriétés qui ne sont pas animables par défaut.

Voici un exemple rapide pour illustrer.

HTML

Le HTML contient un élément<dialog> et un bouton pour afficher le dialogue. De plus, l'élément<dialog> contient un autre bouton pour le fermer.

<dialog>  Contenu ici  <button>Fermer</button></dialog><button>Afficher la fenêtre</button>

CSS

Dans le CSS, nous incluons un bloc@starting-style qui définit les styles de départ pour les propriétésopacity ettransform, les styles de fin de transition sur l'étatdialog:open, et les styles par défaut sur l'étatdialog afin de permettre la transition inverse lorsque le<dialog> se referme. Notez que la listetransition du<dialog> inclut non seulement ces propriétés, mais aussidisplay etoverlay, chacun avecallow-discrete.

Nous définissons également une valeur de style de départ pour la propriétébackground-color sur le sélecteur::backdrop qui apparaît derrière le<dialog> lors de son ouverture, afin de fournir une belle animation d'assombrissement. Le sélecteurdialog:open::backdrop sélectionne uniquement les arrière-plans des éléments<dialog> lorsque le dialogue est ouvert.

/* État ouvert du dialogue */dialog:open {  opacity: 1;  transform: scaleY(1);}/* État fermé du dialogue */dialog {  opacity: 0;  transform: scaleY(0);  transition:    opacity 0.7s ease-out,    transform 0.7s ease-out,    overlay 0.7s ease-out allow-discrete,    display 0.7s ease-out allow-discrete;  /* Equivalent to  transition: all 0.7s allow-discrete; */}/* État avant ouverture *//* Doit se trouver après la règle dialog:open précédente pour prendre effet,    car la spécificité est la même */@starting-style {  dialog:open {    opacity: 0;    transform: scaleY(0);  }}/* Transition du ::backdrop lorsque la boîte de dialogue modale est promue en couche supérieure */dialog::backdrop {  background-color: transparent;  transition:    display 0.7s allow-discrete,    overlay 0.7s allow-discrete,    background-color 0.7s;  /* Equivalent to  transition: all 0.7s allow-discrete; */}dialog:open::backdrop {  background-color: rgb(0 0 0 / 25%);}/* Cette règle @starting-style ne peut pas être imbriquée dans le sélecteur ci‑dessus   car le sélecteur imbriqué ne peut pas représenter des pseudo-éléments. */@starting-style {  dialog:open::backdrop {    background-color: transparent;  }}

JavaScript

Le JavaScript ajoute des gestionnaires d'événements aux boutons d'affichage et de fermeture pour ouvrir et fermer le<dialog> lorsqu'ils sont cliqués :

const dialogElem = document.getElementById("dialog");const showBtn = document.querySelector(".show");const closeBtn = document.querySelector(".close");showBtn.addEventListener("click", () => {  dialogElem.showModal();});closeBtn.addEventListener("click", () => {  dialogElem.close();});

Résultat

Le code s'affiche comme suit :

Animations de<dialog> avec images‑clés

Lorsqu'on anime un<dialog> à l'aide d'animations CSS basées sur des images‑clés, il y a quelques différences à noter par rapport aux transitions :

• Vous ne fournissez pas de@starting-style.
• Vous incluez la valeurdisplay dans une image‑clé ; cette valeur sera celle utilisée pendant toute la durée de l'animation, ou jusqu'à ce qu'une autre valeur visible (nonnone) dedisplay soit rencontrée.
• Il n'est pas nécessaire d'activer explicitement les animations discrètes ; il n'existe pas d'équivalent àallow-discrete dans les images‑clés.
• Il n'est pas non plus nécessaire de définiroverlay dans les images‑clés ; l'animation dedisplay gère l'animation du<dialog> entre l'état affiché et l'état masqué.

Let's have a look at an example so you can see what this looks like.

HTML

Le HTML contient un élément<dialog> et un bouton pour afficher le dialogue. De plus, l'élément<dialog> contient un autre bouton pour le fermer.

<dialog>  Contenu ici  <button>Fermer</button></dialog><button>Afficher la fenêtre</button>

CSS

Le CSS définit des images‑clés pour animer la transition entre les états fermé et affiché du<dialog>, ainsi que l'animation d'apparition du fond du<dialog>. Les animations du<dialog> incluent l'animation dedisplay afin de s'assurer que les effets visuels restent visibles pendant toute la durée. Notez qu'il n'a pas été possible d'animer la disparition du fond — le fond est immédiatement retiré du DOM lorsque le<dialog> est fermé, il n'y a donc rien à animer.

dialog {  animation: fade-out 0.7s ease-out;}dialog:open {  animation: fade-in 0.7s ease-out;}dialog:open::backdrop {  background-color: black;  animation: backdrop-fade-in 0.7s ease-out forwards;}/* Animation keyframes */@keyframes fade-in {  0% {    opacity: 0;    transform: scaleY(0);    display: none;  }  100% {    opacity: 1;    transform: scaleY(1);    display: block;  }}@keyframes fade-out {  0% {    opacity: 1;    transform: scaleY(1);    display: block;  }  100% {    opacity: 0;    transform: scaleY(0);    display: none;  }}@keyframes backdrop-fade-in {  0% {    opacity: 0;  }  100% {    opacity: 0.25;  }}body,button {  font-family: system-ui;}

JavaScript

Enfin, le JavaScript ajoute des gestionnaires d'événements aux boutons pour permettre d'afficher et de fermer le<dialog> :

const dialogElem = document.getElementById("dialog");const showBtn = document.querySelector(".show");const closeBtn = document.querySelector(".close");showBtn.addEventListener("click", () => {  dialogElem.showModal();});closeBtn.addEventListener("click", () => {  dialogElem.close();});

Résultat

Le code s'affiche comme suit :

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'interfaceHTMLDialogElement
• L'évènementclose de l'interfaceHTMLDialogElement
• L'évènementcancel de l'interfaceHTMLDialogElement
• La propriétéopen de l'interfaceHTMLDialogElement
• L'attribut universelinert
• Le pseudo-élément::backdrop
• Guide sur les formulaires HTML