Effet lightbox sur un bloc

Voici un petit effet à la lightbox qui permet d'ouvrir un bloc avec un effet de filtre sur l'arrière plan.
Pour afficher la boite, cliquer sur le lien suivant : Ouvrir la boite
 
X

Ici le contenu de la boite


Code HTML/Javascript :
<a title="Ouvrir" href="#" onclick="document.getElementById('filtre').style.display='block'; document.getElementById('bloc').style.display='block';">Ouvrir la boite</a>
<div id="filtre"></div>
<div id="bloc">
<a title="Fermer" href="#" id="fermeture-bloc" onclick="document.getElementById('bloc').style.display='none'; document.getElementById('filtre').style.display='none'"></a>
<p>Ici le contenu de la boite</p>
</div>
Code CSS :
<style type="text/css">
#filtre
{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity:0.5;
	filter: alpha(opacity=50);
        z-index:10;
        position: fixed; 
}
#bloc 
{
	display: none;
	position: absolute;
	top: 20%;
	left: 20%;
	width: 60%;
	height: 60%;
	padding: 5px;
	margin:5px;
	background-color: white;
        z-index:11;
}
#fermeture-bloc
{
	float:right;
	position:absolute;
	top: -10px;
	right: -10px;
	width: 24px; 
	height: 24px;
	border:none;
	background:url('delete.png') no-repeat;
}
</style>
Récupérer l'image suivante sur votre serveur image croix rouge.
Testé sous Firefox, Internet Explorer et Chrome.
Pour fermer la boite en cliquant directement sur le filtre (arrière plan gris), remplacez :
<div id="filtre"></div>
par
<div id="filtre" onclick="document.getElementById('bloc').style.display='none'; document.getElementById('filtre').style.display='none'"></div>
Voir/déposer un commentaire (2) | Signaler un problème