Lightbox en CSS

Pour ajouter une lightbox à votre page, il n'est pas besoin d'inclure un gros framework Ajax, quelques lignes de CSS et JavaScript suffisent!

Une lightbox est une fenêtre qui affiche un contenu soit statique, soit dynamique, tandis que la page dans le fond est obscurcie. C'est là la source de l'effet: la boite se trouve ainsi comme éclairée.

Nous allons réaliser facilement ce effet avec deux <div>. La premier est un filtre qui recouvre la page entière avec une opacité réduite. Le second est un conteneur pour notre boite, qui s'affiche à la demande.

Démonstration simple avec un contenu statique.

Pour afficher la boite, cliquer sur le lien ouvrir

Titre pour le contenu (image, formulaire ou autre)
Et ceci est le contenu statique de la boite.

Contenu dynamique dans la démo suivante...

Création d'un filtre pour assombrir le fond

Le filtre est une balise <div> positionné par CSS sur l'ensemble de la page.

<div id="shadowing">
#shadowing
{
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #CCA;
  z-index:10;
  opacity:0.5;
  filter: alpha(opacity=50);
}

La propriété display:none fait que le filtre n'est pas affiché au départ, on la change en display:block au moment ou l'on veut le faire apparaître.
La propriété z-index permet de placer le filtre au-dessus des autres éléments de la page.
L'opacité de 0.5 crée un filtre semi-transparent, elle peut varier de 0 (transparence) à 1 (opaque).
La propriété filter: alpha(opacity=50) est pour Internet Explorer 7 uniquement.
Le couleur #CCA donne une teintre de vieux papier au filtre. On choisit la teinte en modifiant cette couleur.

Création de la boite lumineuse

Pour réaliser une boite, on utilise une seconde <div>, qui selon le même principe, n'est pas affichée au départ, et le devient quand l'utilisateur clique sur l'objet à afficher.

<div id="box"  onclick="document.getElementById('box').style.display='none';
                 document.getElementById('filter').style.display='none'">
</div>
#box 
{
  display: none;
  position:fixed;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  max-height:400px;
  padding: 0;
  margin:0;
  border: 1px solid black;
  background-color: white;
  z-index:11;
  overflow: auto;
}

La méthode onclick de DOM déclenche deux évènements. On selectionne le filtre par son identifieur filter et on déclenche son affichage. On sélectionne la boite par son identifieur firstbox et on déclenche son affichage simultanément.
z-index ici est juste un niveau au dessus celui du filtre.
overflow: auto faire apparaître des barres de défilement si la taille du contenu dépasse celle de la boite.

Ajouter un bouton pour fermer la boite

Le bloc contient des <div> imbriqués:

<div id="box" >
<div id="boxheader">
      <span id="boxtitle"> Titre pour le contenu (image, formulaire ou autre)</span>
       <span id="boxclose" onclick="document.getElementById('box').style.display='none';
                 document.getElementById("shadowing").style.display='none'"> 
      </span>
</div>
<div id="boxcontent"> Ceci est le contenu statique provisoire  de la boite.  </div>
</div>

Nous avons structuré la boite pour lui donner une barre de titre (header), afficher un bouton de fermeture (boxclose), et une zone de contenu (boxcontent).

Dans la zone de contenu, on peut placer un contenu statique, comme on le voit dans la première démo.



Forum

lightbox

26-05-2011 16:33:25

discoliv

Merci pour cette lightbox très simple et pratique. Mais, comment faire pour que la lightbox soit à la dimension de l'image voulue et non à la fenetre du navigateur?
30-05-2011 10:53:52

webmaster

Dans ce cas il faudra assigner de façon dynamique une largeur et une hauteur, si la taille change selon l'image, sinon on peut assigner la hauteur et la hauteur dans la fichier CSS
element.style.width="256px";
element.style.height="256px";
Il faudra aussi assigner les valeurs de top et left en fonction de la taille de l'image.
© 2008-2014 Xul.fr