:modal
======

La pseudo-classe CSS **`:modal`** cible un élément qui est dans un état interdisant toute interaction avec les autres éléments situés en dehors jusqu'à ce que l'interaction soit terminée. Plusieurs éléments peuvent être ciblés par la pseudo-classe `:modal` à un même instant donné, mais un seul de ces éléments sera actif et permettra de recevoir une saisie.

Syntaxe
-------
```

:modal
```

Notes d'utilisation
-------------------

Voici des exemples d'éléments qui peuvent empêcher une interaction avec le reste de la page et qui pourront être ciblés par la pseudo-classe :

* L'élément `<dialog>` lorsqu'il est ouvert avec la méthode du DOM `showModal()`.
* Un élément ciblé par la pseudo-classe `:fullscreen` lorsqu'il est ouvert avec la méthode du DOM `requestFullscreen()`.
Exemples
--------

### Mettre en forme une boîte de dialogue

Dans cet exemple, on met en forme une boîte de dialogue modale qui s'ouvre lorsqu'on active le bouton « Mettre à jour les détails ». Cet exemple est construit à partir de l'exemple présent sur la page de l'élément `<dialog>`.
```

<!-- Boîte de dialogue contextuelle simple contenant un formulaire -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label
 >Animal préféré :
        <select>
          <option></option>
          <option>Crevette en saumure</option>
          <option>Panda rouge</option>
          <option>Singe-araignée</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></output>
```


#### CSS


```css
:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}
```


```
const updateButton = document.getElementById("updateDetails");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// Si un navigaeur ne prend pas en charge, on masque le contenu
// de la boîte de dialogue par défaut.
if (typeof favDialog.showModal !== "function") {
  favDialog.hidden = true;
  /\* un script alternatif pour les navigateurs historiques.
 \*/
}
// Le bouton "Mettre à jour les détails" ouvre <dialog> en modal
updateButton.addEventListener("click", () => {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    outputBox.value =
      "Désolé, l'API <dialog> n'est pas prise en charge par ce navigateur.";
  }
});
// Le champ "Animal préféré" définit la valeur du bouton d'envoi
selectEl.addEventListener("change", (e) => {
  confirmBtn.value = selectEl.value;
});
// Le bouton "Confirmer" du formulaire déclenche la fermeture de la boîte avec [method="dialog"]
favDialog.addEventListener("close", () => {
  outputBox.value = `Bouton ${
 favDialog.returnValue
 } cliqué - ${new Date().toString()}`;
});
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Selectors Level 4 # modal-state |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'élément HTML `<dialog>`
* Les autres pseudo-classes relatives à l'état d'affichage :
    + `:fullscreen`
    + `:picture-in-picture`
* La liste complète des pseudo-classes