Pseudo-classe CSS `:modal`

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2022.

Voir la compatibilité complète
En savoir plus

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 est actif et permet de recevoir une saisie.

Exemple interactif

button {
  display: block;
  margin: auto;
  width: 12rem;
  height: 2rem;
}

:modal {
  background-color: beige;
  border: 2px solid burlywood;
  border-radius: 5px;
}

p {
  color: black;
}

<p>Souhaitez-vous voir un nouveau nombre aléatoire&nbsp;?</p>
<button id="showNumber">Montre-moi</button>

<dialog id="favDialog">
  <form method="dialog">
    <p>Le nombre chanceux est&nbsp;: <strong id="number"></strong></p>
    <button>Fermer la boîte de dialogue</button>
  </form>
</dialog>

const showNumber = document.getElementById("showNumber");
const favDialog = document.getElementById("favDialog");
const number = document.getElementById("number");

showNumber.addEventListener("click", () => {
  number.innerText = Math.floor(Math.random() * 1000);
  favDialog.showModal();
});

Syntaxe

css

:modal {
  /* … */
}

Notes d'utilisation

Voici des exemples d'éléments qui peuvent empêcher une interaction avec le reste de la page et qui peuvent ê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 bloquante qui s'ouvre lorsqu'on active le bouton « Afficher la boîte de dialogue ». Cet exemple est adapté de l'exemple présent sur la page de l'élément <dialog>.

<!-- Boîte de dialogue bloquante contenant un formulaire -->
<dialog id="dialogueFavoris">
  <form method="dialog">
    <p>
      <label>
        Animal préféré&nbsp;:
        <select>
          <option></option>
          <option>Crevette en saumure</option>
          <option>Panda rouge</option>
          <option>Singe-araignée</option>
        </select>
      </label>
    </p>
    <menu>
      <button>Annuler</button>
      <button>Confirmer</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="afficherDialogue">Afficher la boîte de dialogue</button>
</menu>

<output></output>

CSS

La pseudo-classe :modal sélectionné le dialogue qui est ouvert avec showModal(), lui donnant une bordure rouge, une couleur d'arrière-plan jaune et une ombre.

css

:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}

const boutonAfficher = document.getElementById("afficherDialogue");
const dialogueFavoris = document.getElementById("dialogueFavoris");

boutonAfficher.addEventListener("click", () => {
  dialogueFavoris.showModal();
});