Accueil
Site
Effet "lightbox" en CSS
Bonjour,
Dans ce tutoriel je vais vous expliquer comment créer une sorte de "lightbox" pour y placer un élément de votre choix. Une "lightbox" est un effet crée en javascript qui, lors d'un clic sur une image par exemple, va placer un voile noir sur la page et agrandir l'image au centre. L'élément est alors "au dessus" de la page et celle-ci n'est plus accessible momentanément. Pour fermer l'élément il faut alors cliquer sur un bouton "X" ou "fermer", ou bien directement sur la zone sombre autour de l'image ou de l'élément.
Un petit exemple vous parlera peut-être d'avantage.
Puisque nous n'allons ici crée qu'un "effet" lightbox, il n'y aura pas autant de transition (ça serait possible mais nous allons faire simple) et nous allons l'utiliser pour un élément unique et non comme dans l'exemple pour une série d'images type "galerie".
Pour vous montrer ce que donnera ce tutoriel concrètement, voici quelques screens :
Le bouton, qui se situe ici dans la PA.
Au clic sur ce bouton le voile descend sur la page progressivement.
Au final nous avons notre zone de contenu, isolée du reste par ce voile noir en opacité réduite.
Commençons !
Information : j'ai souhaité réaliser ce code en "tutoriel", il y a donc des étapes, une progression, des explications... Si vous voulez utiliser directement le code allez en fin de tuto' où il est récapitulé en entier. Cependant, avant d'aller poster toute demande d'aide en codage le concernant, lisez entièrement ce tutoriel.
Pour pouvoir lire le contenu merci de poster un message à la suite 
