Une lightbox uniquement en CSS

Par soucis de chargement de plusieurs fichiers JavaScript sur votre page, vous pouvez très bien créer des Lightbox qui n’utilise pas de fichier externe. Sans tomber dans l’absurde de mettre tout le code dans la page, évidemment .. ! Le principe est relativement simple, il suffit d’un bloc css qui est caché à la base et qu’on affiche au milieu de l’écran ensuite. Un p’tit overlay pour mettre le focus sur le bloc, et le tour est joué.

Cependant vous perdez un peu l’effet de la ligthbox, c’est à dire son affichage “doux”, son redimensionnement automatique par rapport au contenu, une éventuelle navigation dans une galerie d’image. Cet exemple est juste là pour vous montrez que c’est faisable en CSS uniquement (juste une ligne de JavaScript) et de façon très simple !