:modal - Sélecteur CSS
Résumé des caractéristiques du sélecteur :modal
Description de la pseudo-classe :modal.
La pseudo-classe :modal cible les éléments affichés en modal, c'est à dire ceux qui s'affichent par dessus la page courante
en bloquant l'accès aux autres éléments.
En cliquant sur le bouton ci-dessous vous afficherez une fenêtre en modal. Constatez qu'il n'est plus possible d'accéder au reste de
la page, comme par exemple pour sélectionner du texte.
Les éléments affichables en modal sont la plupart du temps des balises dialog.
L'affichage et la fermeture d'un élément en modal nécessitent un peu de code Javascript. Ces deux fonctions attendent en paramètre l'ID de l'élément à afficher ou à fermer.
function showModal(id) {
document.getElementById(id).showModal();
}
function hideModal(id) {
document.getElementById(id).close();
}
Exemples d'utilisation de la pseudo-classe :modal.
L'exemple est construit autour d'un élément dialog invisible au départ. Il peut être affiché normalement ou en modal par les deux boutons ci-dessous. Observez que la couleur de l'arrière-plan n'est pas la même dans ces deux cas : l'explication est dans le code CSS.
Compatibilité des navigateurs.
La prise en charge de la pseudo-classe :modal est maintenant à peu près correcte, au moins pour les navigateurs sur PC.
:modal qui cible les éléments affichés en mode modal.:modalNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Samsung Internet
Opéra
Safari sur IOS
Firefox
Firefox pour Androïd
Chrome
Edge
Androïd Brower
Chrome pour Androïd
KaiOS Browser
Opéra mini
Historique de la pseudo-classe :modal.
-
Sélecteurs - Niveau 4
Concernant:modal. Introduction de la pseudo-classe:modaldans cette spécification.
29 Septembre 2011Document de travail.
Voir aussi : sélecteurs relatifs à l'état d'affichage.
select), et qui se trouve dans l'état fermé.select), et qui se trouvent dans l'état ouvert.