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!

La lightbox, comment cela fonctionne

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.

Le filtre pour assombrir le fond

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

<div id="filter">

#filter
{
	display: none;
	position: absolute;
	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.

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: absolute;
	top: 20%;
	left: 20%;
	width: 60%;
	height: 60%;
	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.

Une boite plus élaborée

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('filter').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.

Démonstration

• Démo de lightbox statique.
• Voir le code CSS.
• Télécharger l'image.
  

(c) 2008 Xul.fr
Licence: Vous êtes libre d'utiliser le code de ces tutoriels pour motoriser votre propre site. Soyez aimable de ne pas placer les tutoriels ou autres fichiers sur un autre site, placez plutôt un lien sur l'article. Mais vous pouvez imprimer les pages et les distribuer avec le code à des fins d'enseignement.