: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 laisse encore à désirer, en particulier sur les navigateurs pour téléphones mobiles.
:modalNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
Baidu Browser
QQ Browser
Opéra Mobile
Firefox
Chrome
Safari
Edge
Opéra
Chrome pour Androïd
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Voir aussi : sélecteurs relatifs à l'état d'affichage.