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

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;
}

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).
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.

• Télécharger l'archive . Contient plusieurs démonstrations et le code CSS et JavaScript.
  

element.style.width="256px";
element.style.height="256px";