Vous connaissez forcément les fenêtres modales, même s’il est possible d’ignorer que ça porte ce nom : ce sont ces petites fenêtres qui s’ouvrent lorsque vous cliquez sur un lien ou un bouton par exemple et qui vous permettent diverses choses comme indiquer votre adresse e-mail ou plein d’autres trucs. Les fenêtres modales ont évolué avec le temps : auparavant, elles étaient seulement de simples nouvelles fenêtres de votre navigateur mais, aujourd’hui, ce sont de véritables petits blocs entièrement personnalisés. Seulement voila, il existait un point commun entre ces deux types de fenêtres modales : seul JavaScript permettait d’en créer, ce qui n’est désormais plus le cas.

Car maintenant, on peut créer des fenêtres modales avec du simple CSS, grâce à une pseudo-classe bien particulière. Et si vous vous demandez ce qu’est une pseudo-classe, rassurez-vous, là encore vous connaissez et en avez sûrement déjà utilisé. La plus connue des pseudo-classes est probablement :hover qui permet de modifier l’apparence d’un élément lorsqu’on le survole. La pseudo-classe qui nous intéresse ici, c’est :target, une pseudo-classe assez récente qui n’est donc pas encore intégrée partout.

La pseudo-classe :target permet de modifier le style d’un élément lorsque celui-ci est ciblé, c’est-à-dire lorsque c’est son id qui est référencé dans l’ancre de l’adresse (vous savez, les trucs du style #identifiant à la fin de l’URL). Cette pseudo-classe peut donc vous permettre de surligner un paragraphe qui intéresse le lecteur qui s’y rend par exemple, mais elle permet aussi de créer une fenêtre modale avec très peu de choses.

Pour cela, il nous faut déjà une fenêtre modale qui sera un bloc comme un div. Vous pouvez bien sûr choisir ce que vous voulez tant que vous lui indiquez un id. Pour notre exemple, nous allons choisir l’id « fenetre » (histoire de faire original). Nous avons également besoin d’un lien pour ouvrir cette fenêtre, ce lien possédera donc en valeur de l’attribut href l’ancre pointant vers notre fenêtre : dans notre exemple, nous indiquerons donc href= »#fenetre ».

Tout se joue maintenant dans le CSS. Personnalisez votre fenêtre comme bon vous semble, la façon de faire importe peu. En fait, il faut juste comprendre une chose : par défaut, votre fenêtre modale doit être masquée (logique) donc la seule contrainte qui vous est imposée est d’indiquer la propriété bien connue display avec pour valeur none.

#fenetre {
	display: none;
}

Nous avons donc une fenêtre masquée, reste à l’afficher au bon moment, c’est-à-dire quand elle est ciblée. Pour cela, vous l’aurez compris, nous utiliserons la pseudo-classe :target, une pseudo-classe utilisée de la façon qui suit.

#fenetre:target {
	display: block;
}

Et le tour est joué ! Lorsque vous cliquez sur le lien créé plus haut, l’ancre vous ramène à la fenêtre qui est donc ciblée et qui s’affiche alors, grâce à :target. Et c’est maintenant qu’une nouvelle question va se poser : comment peut-on fermer une telle fenêtre sans passer par une modification manuelle de l’URL ? C’est très simple : il suffit de changer l’ancre dans l’URL et, pour cela, il suffit de créer un nouveau lien que vous créerez dans votre fenêtre modale, un lien dont l’attribut href possédera comme valeur une ancre vers n’importe quoi pourvu que l’id référencé soit différent de celui de la fenêtre. Vous pouvez, si vous le souhaitez utiliser simplement href= »# ».

Voila, vous savez tout. Et si vous n’avez pas l’utilité d’une fenêtre modale, il ne s’agit pas, comme dit plus haut, de la seule finalité de la pseudo-classe :target : comme beaucoup d’autres choses, elle aura l’utilité que vous lui trouverez. Cependant, si vous choisissez de l’utiliser pour une fenêtre modale, sachez que si vous vous posez la question : si (oui là ça fait beaucoup de si) le visiteur utilise un navigateur qui ne supporte pas la pseudo-classe :target, le clic sur le lien d’ouverture de la fenêtre modale n’aura aucune conséquence, aucun bug ne se produira, il ne se passera tout simplement rien du tout.