Sie sind auf Seite 1von 3

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 fentre 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
claire.
Nous allons raliser facilement cet effet avec deux <div>. Le premier est un filtre qui
recouvre la page entire avec une opacit rduite. Le second est un conteneur pour notre boite,
qui s'affiche la demande.

Dmonstration simple avec un contenu statique.


Pour afficher la boite, cliquer sur le lien ouvrir

Cration 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 proprit display:none fait que le filtre n'est pas affich au dpart, on la change en
display:block au moment ou l'on veut le faire apparatre.
La proprit z-index permet de placer le filtre au-dessus des autres lments de la page.
L'opacit de 0.5 cre un filtre semi-transparent, elle peut varier de 0 (transparence) 1
(opaque).
La proprit 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.

Cration de la boite lumineuse


Pour raliser une boite, on utilise une seconde <div>, qui selon le mme principe, n'est pas
affiche au dpart, 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 mthode onclick de DOM dclenche deux vnements. On slectionne le filtre par son
identifieur filter et on dclenche son affichage. On slectionne la boite par son identifieur
firstbox et on dclenche son affichage simultanment.
z-index ici est juste un niveau au dessus celui du filtre.
overflow: auto faire apparatre des barres de dfilement si la taille du contenu dpasse celle de
la boite.

Ajouter un bouton pour fermer la boite


Le bloc contient des <div> imbriqus:

<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
defermeture (boxclose), et une zone de contenu (boxcontent).
Dans la zone de contenu, on peut placer un contenu statique, comme on le voit dans la
premire dmo.

Tlcharger l'archive . Contient plusieurs dmonstrations et le code CSS et JavaScript.