<dialog> : l'élément de boîte de dialogue

Attributs

Cet élément inclut les attributs 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 :

• Une action 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 ».
• Une action 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 gestionnaire click qui appelle HTMLDialogElement.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 valeur closedby valide :

• s'il a été ouvert avec showModal(), 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'attribut open 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'attribut open. Si un <dialog> est ouvert avec l'attribut open, 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'attribut open, cette approche n'est pas recommandée. Voir open pour plus d'informations.

Notes d'utilisation

• Les éléments <form> peuvent fermer un dialogue s'ils possèdent l'attribut method="dialog" ou si le bouton utilisé pour soumettre le formulaire a l'attribut formmethod="dialog". Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriété returnValue définie sur la value (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é avec HTMLDialogElement.showModal(). Par exemple, pour atténuer le contenu inaccessible derrière la boîte de dialogue modale.
• L'attribut autofocus 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'attribut autofocus peut être ajouté à l'élément <dialog> lui-même.
• Ne pas ajouter l'attribut tabindex à 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 utilise HTMLDialogElement.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'attribut autofocus 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éthode showModal() 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 ARIA role="dialog". Les éléments <dialog> invoqués par la méthode showModal() ont implicitement aria-modal="true", alors que les éléments <dialog> invoqués par la méthode show() ou affichés en utilisant l'attribut open ou en changeant la propriété CSS display 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 global inert. Lorsque l'on utilise <dialog> avec la méthode HTMLDialogElement.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éen open 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'attribut method 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'attribut open. Les boîtes de dialogue affichées à l'aide de l'attribut open 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éthode HTMLDialogElement.show(). Il est possible de basculer l'affichage de la boîte de dialogue en ajoutant ou en retirant l'attribut booléen open, 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 un arriè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éthode close() 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'attribut autofocus 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 dialogue
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// Le bouton "Fermer" ferme le dialogue
closeButton.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 est type="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 retour returnValue est cancel.

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 retour returnValue n'est pas mise à jour et l'événement close 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 id="favDialog">
  <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 id="confirmBtn" value="default">Confirmer</button>
    </div>
  </form>
</dialog>
<p>
  <button id="showDialog">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 modale
showButton.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éthode dialog (comme dans l'exemple uniquement HTML).
• En appuyant sur la touche Échap.
• En appelant la méthode HTMLDialogElement.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 formulaire dialog et le bouton « Confirmer » ferme la boîte de dialogue via la méthode HTMLDialogElement.close().

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

Sans action, la soumission du formulaire via la méthode par défaut GET entraîne le rechargement de la page. Nous utilisons JavaScript pour empêcher la soumission et fermer le dialogue avec les méthodes event.preventDefault() et HTMLDialogElement.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'attribut formnovalidate sur le bouton de fermeture, soit appelez la méthode close() sur l'objet dialogue lorsque le bouton de fermeture est cliqué.

<dialog id="dialog">
  <form method="dialog">
    <p>
      <label>
        Animal préféré&nbsp;:
        <input type="text" required />
      </label>
    </p>
    <div>
      <input type="submit" id="normal-close" value="Fermeture normale" />
      <input
        type="submit"
        id="novalidate-close"
        value="Fermeture sans validation"
        formnovalidate />
      <input type="submit" id="js-close" value="Fermeture JS" />
    </div>
  </form>
</dialog>
<p>
  <button id="show-dialog">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 bouton Fermeture normale. En revanche, le dialogue peut être fermé si l'on contourne la validation du formulaire en utilisant l'attribut formnovalidate sur le bouton Fermeture sans validation. Le code peut aussi appeler dialog.close() pour fermer ce type de dialogue.

Comparaison des comportements selon la valeur de closedby

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

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'attribut closedby : none, closerequest et any. 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 id="controls">
  <button id="none-btn"><code>closedby="none"</code></button>
  <button id="closerequest-btn">
    <code>closedby="closerequest"</code>
  </button>
  <button id="any-btn"><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 class="close">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 class="close">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 class="close">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énement click à chaque bouton de contrôle à l'aide de addEventListener, le gestionnaire d'événement ouvre l'élément <dialog> associé via showModal(). Nous parcourons ensuite les références aux boutons « Fermer », en affectant à chacun un gestionnaire click qui ferme son élément <dialog> via close().

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 le comportement 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 sur display: none; lorsqu'ils sont masqués et sur display: block; lorsqu'ils sont affichés, et sont retirés / ajoutés de la couche 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. Les navigateurs compatibles animent la propriété display avec une variation du type d'animation discrète. Concrètement, le navigateur basculera entre none et une autre valeur de display afin que le contenu animé soit visible pendant toute la durée de l'animation.

Par exemple :

• Lorsqu'on anime display de none à block (ou vers une autre valeur visible de display), la valeur basculera en block à 0% de la durée de l'animation pour être visible pendant toute la durée.
• Lorsqu'on anime display de block (ou d'une autre valeur visible) vers none, la valeur basculera en none à 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 de display passe de none à une autre.

la propriété display

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

la propriété overlay

Incluez overlay 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éfinissez transition-behavior: allow-discrete sur les transitions display et overlay (ou via le raccourci transition) 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 id="dialog">
  Contenu ici
  <button class="close">Fermer</button>
</dialog>

<button class="show">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és opacity et transform, les styles de fin de transition sur l'état dialog:open, et les styles par défaut sur l'état dialog afin de permettre la transition inverse lorsque le <dialog> se referme. Notez que la liste transition du <dialog> inclut non seulement ces propriétés, mais aussi display et overlay, chacun avec allow-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électeur dialog: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 valeur display 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 (non none) de display 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éfinir overlay dans les images‑clés ; l'animation de display 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 id="dialog">
  Contenu ici
  <button class="close">Fermer</button>
</dialog>

<button class="show">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 de display 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'interface HTMLDialogElement
• L'évènement close de l'interface HTMLDialogElement
• L'évènement cancel de l'interface HTMLDialogElement
• La propriété open de l'interface HTMLDialogElement
• L'attribut HTML universel inert
• Le pseudo-élément ::backdrop
• Guide sur les formulaires HTML