: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 DOMshowModal()
. - Un élément ciblé par la pseudo-classe
:fullscreen
lorsqu'il est ouvert avec la méthode du DOMrequestFullscreen()
.
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
: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
- L'élément HTML
<dialog>
- Les autres pseudo-classes relatives à l'état d'affichage :
- La liste complète des pseudo-classes