Voici un petit code très simple qui va vous permettre de faire une modal box et ce sans JavaScript.
En effet, le ce code utilise l’un des nouveaux sélecteurs du CSS3, la pseudo classe :target qui peut être utilisée pour appliquer des règles à un élément ayant un identifiant spécifique, que ce soit une ancre ou un id.
Voilà à quoi notre modal box va ressembler :
En fait, lors du clique sur le bouton qui permet de fermer la modal, nous allons utiliser le fameux :target qui va nous permettre de cacher la fenêtre et l’overlay.
#content:target .modal {display:none;}
#content:target .modal-overlay {display:none;}
<a href="#content" class="submit">Close this box</a>
En gros, après un clique sur le bouton qui ferme la modal, l’url devient www.site.com/#content et le fait que le #content soit ciblé, la modal et l’overlay sont mis en display:none. Vous pouvez par exemple utiliser ce type de modal lors de la première connexion d’un utilisateur.
Pour bien comprendre le fonctionnement et récuperer la source allez voir ça par à cette adresse http://studio.victorcoulon.fr/css/modal/.
