Effet "lightbox" pour afficher un élément (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 :


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.





I/ Création du bouton

Pour cet exemple, l'élément placé dans la lightbox sera la page d'accueil OU un élément de celle-ci, pouvant être la ChatBox. Je vous en direz plus sur la personnalisation et les autres possibilités en fin de tutoriel.

Ouvrez donc votre panneau d'administration et allez dans "Affichage" > Général > Page d'accueil

Code:

<a href="#tlb" class="lb_bouton">Afficher xxxx</a>

Pour le moment c'est très simple, j'ai juste un lien qui sera mis en forme grâce à la "class" qu'il porte. Ce doit retenir votre attention c'est certainement l'adresse du lien, car ce n'en est pas une... c'est une "ancre". (Pour un exemple d'utilisation d'ancre vous avez le tutoriel "navigation rapide", juste manière de donner un complément, il n'est pas utile de l'avoir fait ou lu pour poursuivre).
Pour simplifier, l'ancre renvoie à une "div" (bloc) qui nous sert d'appel pour réaliser une animation en css grâce à l'attribut "target". Pas besoin de comprendre ça en détail pour le moment, les explications viendront au fur et à mesure.

Ajoutons la mise en forme de notre lien avec le css :

Code:

.lb_bouton
{
  display: block;
  width: 200px;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  background: white;
  border: 1px solid grey;
  color: grey !important;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
}
.lb_bouton:hover
{
  background: grey;
  color: white !important;
  border: 1px solid darkgrey;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
}

Il y a donc l'apparence du bouton "normal" et celle du bouton survolé (hover). La transition sert ici à rendre l'effet progressif, le 500ms correspondant à la durée de cette transition (500 millisecondes).

Voilà, c'était tout simple, notre bouton est là. Bien sûr vous pourrez le personnaliser à votre guide, et écrire ce que vous voulez dessus, comme "Afficher la page d'accueil", ou "Ouvrir la ChatBox" ou même pourquoi pas "Consulter les prédéfinis" ou "Voir la carte du monde" !

Pour le moment votre lien ne mène à rien, et c'est normal...


II/ Création du voile noir

Nous allons créer le fameux voile noir qui couvrira toute notre page. Pour cela, retourner dans l'affichage de la page d'accueil et ajoutez le code suivant :

Code:

<div id="lb_fond"></div>
<a href="#tlb" class="lb_bouton">Afficher xxxx</a>

Notre bloc est donc placé juste avant le lien, en réalité son positionnement n'a que peu d'importance que moment que les deux éléments sont séparés et non l'un dans l'autre.
Pour mettre en forme notre bloc, allons dans le CSS. Je vous donne celui-ci et je vous explique ensuite :

Info : gardez toujours un onglet ouvert pour votre panneau d'admin car vous ne pourrez plus cliquer sur aucun lien après la mise en place de ce css. Pas d'inquiétude cependant, même si vous avez tout fermé vous pourrez toujours aller dans votre PA en tapant "/admin" à la suite de l'adresse de votre forum dans la barre de recherche.

Code:

#lb_fond
{
  position: fixed;
  z-index: 990;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(http://img11.hostingpics.net/pics/288702902.png);
}

Nous avons donc notre bloc "fixe" (c'est à dire qu'il ne bougera pas peu importe où vous êtes sur la page, il est "bloqué"), le "z-index" n'est là que pour qu'on soit sûr que ce voile passe bien par dessus tout les éléments, et si je n'ai pas mis "999" c'est juste parce qu'il y aura bien des éléments qui devront être par dessus lui, notamment son contenu^^.
Ce bloc fait la largeur et hauteur de toute la page, exprimé par le 100%, et donc couvrera tout quel que soit la résolution/taille d'écran du visiteur.
Le top et left permettent de caler le bloc bien dans l'angle pour qu'il n'y ait pas de décalage (enlevez-le pour voir, il y en aura probablement un).
Pour finir le background est simplement une image noire en opacité réduite, que vous pouvez faire vous-même très facilement. Elle fait 20*20px pour ne pas être trop lourde (elle pourrait même ne faire que 1*1 d'ailleurs xD).

Remarque : vous n'êtes pas obligé de faire ce voile en noir, vous pouvez très bien le faire en blanc, rouge, bleu et comme vous voulez !

Après enregistrement de votre css vous constatez que votre bloc est effectivement en place, reste à le faire disparaitre en haut de page pour qu'ensuite il donne l'impression de descendre sur la page lorsqu'on clique sur le bouton.
Pour le mettre en haut, il faut simplement lui ajouter une marge haute négative qui correspond à la hauteur de la page. Puisque cette hauteur de page est différente selon les écran, nous mettons "100%" ^^

Code:

#lb_fond
{
  position: fixed;
  z-index: 990;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(http://img11.hostingpics.net/pics/288702902.png);
  margin-top: -100%;
}

J'ai simplement ajouter cette marge. Le bloc a désormais "disparu", en réalité il est simplement hors de la page bien sûr.


III/ Appel du voile

Pour réaliser cet "appel" nous allons créer la fameuse "div" qui nous sert d'ancre, dans le HTML :

Code:

<div id="tlb"></div>

Cette "div" se nomme "tlb" pour "target lightbox". Elle doit absolument englober tout les éléments qui seront en relation avec elle, donc le bouton autant que le bloc "voile". Voilà ce que donne alors notre code :

Code:

<div id="tlb">
<div id="lb_fond"></div>
<a href="#tlb" class="lb_bouton">Afficher xxxx</a>
</div>

Cela ne suffit pas pour faire apparaitre notre voile, il faut définir dans le css l'appel et ses conséquences :

Code:

#lb_fond
{
  position: fixed;
  z-index: 990;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(http://img11.hostingpics.net/pics/288702902.png);
  margin-top: -100%;
  transition: 1s;
  -moz-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
}
#tlb:target #lb_fond
{
  margin-top: 0;
  transition: 1s;
  -moz-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
}

Nous avons donc notre voile en -100% vers le haut, j'ai juste ajouté la transition pour qu'elle soit progressive dans le début du code. La suite est simple : #tlb:target signifie "lorsque l'ancre de tlb est appelée", et le fait d'ajouter le #lb_fond à la suite signifie que c'est cette div là qui va subir un effet.
Notre fond passe donc simplement d'une position de -100% à 0.

Validez et essayez de cliquer sur votre bouton...votre voile devrait tomber sur l'écran x)
Alors bon, évidemment, n'ayant pas de bouton de retour pour le moment, vous devrez enlever le /#tlb de votre barre de lien pour enlever le voile.


IV/ Création du lien de retrait sur le voile

Nous allons créer un lien retour qui couvrira toute la zone du voile, ainsi une fois ouvert il suffira de cliquer sur lui pour qu'il se referme. Commençons donc par placer un lien, vide en apparence :

Code:

<div id="tlb">
 <div id="lb_fond">
 <a href="#" class="lb_close2"></a>
 </div><a href="#tlb" class="lb_bouton">Afficher xxxx</a>
</div>

Bon, il s'appelle "close2" car j'avais déjà fait un "close" (bouton) mais pour le tutoriel j'ai décidé de commencer par vous faire faire ce lien global avant le reste^^
Ce lien est donc simplement situé dans le bloc "fond" (notre voile). Actuellement ce lien est vide, mais nous allons lui faire couvrir toute la zone de page, comme ceci (CSS) :

Code:

.lb_close2
{
  position: absolute;
  z-index: 995;
  display: block;
  width: 100%;
  height: 100%;
}

Même principe pour la taille, elle est de 100% afin de couvrir la page. Puisqu'un lien est de type "inline" (ligne) le "display: block" change de type en "bloc" afin de justement pouvoir lui donner une taille. L'index indique qu'il sera au dessus du voile, mais nous laisse une marge pour ajouter un autre élément par dessus.

Testez alors votre voile en cliquant sur le bouton puis en cliquant sur le voile lui-même une fois affiché. Il doit donc descendre puis remonter à volonté.


V/ Création du contenu et du bouton "fermer"

Maintenant que notre voile est prêt il nous faut ajouter un bloc de contenu où vous pourrez ensuite placer votre élément choisi (CB, PA, élément de PA, carte, etc...).
Commençons par mettre le bloc de contenu dans notre PA (notre HTML disons) :

Code:

<div id="tlb">
 <div id="lb_fond">
 <div id="lb_content"></div>
<a href="#" class="lb_close2"></a>
 </div><a href="#tlb" class="lb_bouton">Afficher xxxx</a>
</div>

Le voici donc, il se situe dans le "lb_fond" (donc le voile) et au dessus du lien couvrant la page et permettant de le refermer.
Appliquons-lui ensuite une mise en forme :

Code:

#lb_content
{
  position: absolute;
  z-index: 999;
  width: 900px;
  height: 400px;
  left: 50%;
  margin-left: -450px;
  margin-top: 20px;
  background: white;
}

Les marges vous paraitront peut-être étranges, mais c'est de cette façon que l'on peut centrer un bloc qu'importe la résolution d'écran, en ayant le "positionnement absolute". En effet, le "margin: auto" ne fonctionnerait qu'avec un positionnement "relative".
Pourquoi ne pas avoir mis un positionnement relative ? J'aurais pu, cela fonctionnait bien aussi, mais la zone de lien sur le voile pour fermer celui-ci n'était alors plus accessible à droite et à gauche du cadre.

Attention, il est important de savoir que vous devrez adapter l'une des marges (left) en fonction de la largeur de votre bloc. Je ne vous oblige pas à comprendre le procédé, bien que si vous le souhaitez vous trouverez l'explication dans ce tutoriel, mais vous devrez juste retenir que cette marge négative gauche doit être égale à la moitié de votre largeur de bloc. Dans mon cas, j'ai un bloc de 900px donc ma marge est de -450px.

Ajoutons maintenant un bouton pour fermer, car même si on peut le faire en cliquant sur la zone sombre (ou peu importe la couleur que vous aurez mis) ce n'est pas évident à comprendre et pas indiqué, il est donc mieux d'avoir un bouton "fermer" clair.
Tout d'abord il faut mettre ce lien dans le HTML :

Code:

<div id="tlb">
 <div id="lb_fond">
 <div id="lb_content"><a href="#" class="lb_close">X</a>
 </div><a href="#" class="lb_close2"></a>
 </div><a href="#tlb" class="lb_bouton">Afficher xxxx</a>
</div>

C'est donc notre "close", le fameux premier close que j'avais mis.
Dans le CSS on va lui donner une forme sympa et le placer en dehors de notre contenu, juste histoire qu'il se voit bien et qu'il ne nous gêne pas ensuite :

Code:

.lb_close
{
  display: block;
  position: absolute;
  padding: 2px 5px;
  margin-left: 900px;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -htm-border-radius: 15px;
  -webkit-border-radius: 15px;
  -o-border-radius: 15px;
  background: black;
  border: 2px solid white;
  color: red !important;
  text-decoration: none !important;
  font-size: 11px;
  font-weight: bold;
}

Voilà !
Alors je ne l'ai pas fait mais vous pouvez très bien lui donner un effet au survol.

Remarque : si vous avez peur que du contenu dépasse du bloc de contenu et que vous appliquez du coup un "overflow: auto" ou un "overflow: hidden" dessus, votre bouton "fermer" ne se verra plus ! Et c'est bien normal, il est en dehors du bloc...

Nous avons donc terminé notre lightbox, et voici pour vous aider un récapitulatif du HTML et du CSS :


VI/ Récapitulatif du code

HTML :

Code:

<div id="tlb">
 <div id="lb_fond">
 <div id="lb_content"><a href="#" class="lb_close">X</a>
 </div><a href="#" class="lb_close2"></a>
 </div><a href="#tlb" class="lb_bouton">Afficher xxxx</a>
</div>

CSS :

Code:

/* LIGHTBOX CSS */

.lb_bouton
{
  display: block;
  width: 200px;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  background: white;
  border: 1px solid grey;
  color: grey !important;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
}
.lb_bouton:hover
{
  background: grey;
  color: white !important;
  border: 1px solid darkgrey;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
}
#lb_fond
{
  position: fixed;
  z-index: 990;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(http://img11.hostingpics.net/pics/288702902.png);
  margin-top: -100%;
  transition: 1s;
  -moz-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
}
#tlb:target #lb_fond
{
  margin-top: 0;
  transition: 1s;
  -moz-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
}
#lb_content
{
  position: absolute;
  z-index: 999;
  width: 900px;
  height: 400px;
  left: 50%;
  margin-left: -450px;
  margin-top: 20px;
  background: white;
}
.lb_close
{
  display: block;
  position: absolute;
  padding: 2px 5px;
  margin-left: 900px;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -htm-border-radius: 15px;
  -webkit-border-radius: 15px;
  -o-border-radius: 15px;
  background: black;
  border: 2px solid white;
  color: red !important;
  text-decoration: none !important;
  font-size: 11px;
  font-weight: bold;
}
.lb_close2
{
  position: absolute;
  z-index: 995;
  display: block;
  width: 100%;
  height: 100%;
}

VII/ Conseils d'utilisation et personnalisation

1) Un contenu dans le contenu - tout d'abord je vous conseille de faire un autre bloc de contenu dans le bloc de contenu afin de pouvoir y mettre un overflow (auto ou hidden) selon ce que vous voulez afficher. Ce ne sera pas utile pour une CB qui a la taille que l'on décide et qui ne bouger pas, ni pour une carte, mais ce pourra être utile pour un texte destiné à varier.

2) Attention à la taille - en effet, les écrans ne sont pas tous les mêmes et autant notre voile s'adapte, autant notre contenu est en pixel... il faut donc soit le mettre en pourcentage mais vous vous exposer à un souci pour le remplir comme vous le souhaitez (ce sera plus compliqué avec des pourcentages partout), soit le mettre en pixel mais le laisser à une taille raisonnable, à savoir une taille qui rentrera dans tout les écrans.

3) Vous pouvez déplacer le code - pour le mettre par exemple dans votre template "page d'accueil" et y placer votre QEEL, c'est tout à fait faisable, et pour ceux qui s'en souviennent c'était ce que j'avais fait dans mon thème "Pirates" pour les 6 ans du forum.

4) Le contenu peut être très divers - comme dit plus haut : la CB, une carte, un tableau d'effectif, une liste de prédéfinis, des informations diverses, une vidéo, une playlist....bref je vous fais confiance pour faire preuve d'imagination là-dessus ! Une fois le bloc de contenu fait, vous pouvez mettre ce que vous voulez dedans, y compris un autre code de PA ou d'autre chose trouvé sur Never-Utopia.

5) Attention cependant... - en cas d'utilisation d'un autre code dans celui-ci, vérifiez tout d'abord que le bloc ajouté ne soit pas plus large ou plus haut que votre bloc de contenu. Veillez également à ce que les noms des éléments ne soient pas identiques (bien que j'en doute, j'ai volontairement mis le "lb" devant mes noms d'id ou de class).

6) La personnalisation est grande ensuite - vous pouvez mettre votre propre image de fond, comme je l'avais fait pour le thème pirate, ou bien ne pas mettre de fond du tout. Vous pouvez créer votre image de fond d'opacité réduite de la couleur que vous voulez, ou même avec un motif, pourquoi pas... Pour tout le reste vous savez faire^^

Voilà ! C'est terminé pour notre bel effet lightbox ! On pourrait aller plus loin en ajoutant un effet d'apparition progressive sur la boite de contenu, mais ça sera accessoire et je vous laisse éventuellement chercher cela par vous-même.

PS : merci à Jade pour la réalisation de la petite image de fond qui m'aide bien car n'ayant pas photoshop au boulot c'était un peu compliqué de la faire x)

Prems mon capitaine + merci :)

Ouuuh ! voilà qui me semble bien intéressant!MERCI beaucoup ♥

Merci **

Merci, enfin je vais savoir !

Mercii beaucoup !

Merci !

Merci pour ce tuto ! (:

merci

Merci Sparrow, je suis curieux de voir ce tutoriel

Alors, c'est superbe, je me suis servi de cet effet pour une iframe centrée en lightbox, en revanche, j'ai juste question, est-il normal qu'à l'ouverture de "la lightbox", la page descend un peu, et qu'à sa fermeture, le forum retourne automatiquement en haut de page?

C'est dommage, en soi, ça gâche un peu l'effet, quelqu'un sait-il comment éviter ce défilement de la page en arrière de la lightbox?

Cordialement.

Ca m'interresse beaucoup! Merci!

merci =)

Je cherchais ! Merci ♥

Merci :)

Merci du partage ! :DD

merci

Merci !

Han je le rechercher ce code, mille merci

Merci :)

Thank's a lot!

Merciiii   

*.*

Exactement le genre d'effet que je recherchais pour mon forum. Thank you, Captain.

Merci   

Merciii!