:modal

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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>.

CSS

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

Résultat

Spécifications

Specification
Selectors Level 4
# modal-state

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi