: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 :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 :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi : pseudo-classes relatives à l'état d'affichage.
:open::closed::modal::fullscreen::picture-in-picture:
Pseudo-classe désignant un élément pouvant être soit ouvert, soit fermé, comme
Pseudo-classe désignant un élément pouvant être soit ouvert, soit fermé, comme un menu
Pseudo-classe désignant les éléments qui bloquent les interactions avec les autres éléments.
Pseudo-classe désignant les éléments affichés en plein écran.
Pseudo classe désignant un élément (le plus souvent une vidéo) affiché dans une fenêtre ne défilant pas avec le reste de la page.