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

Catégorie Créer son site

Créer un site, ce qu'il vous faut savoir et ce qu'il vous faut !Les erreurs à éviter lors de la création d'un siteNom de domaine et Hébergement internetWampServerTransfert d'une page par ftpCHMOD ou CHange MODeLogiciels FTP gratuitStatistique gratuiteLogiciels de créations de sitesFavicon dans les favoris et la barre d'adresseProtection par fichier htaccess d'un dossier sous Free.frMontrer ou cacher un bloc de texte avec getElementByIdKit graphique gratuit - Free templateGraphisme gratuit - Créer votre bannière ou logo gratuitementServices de redirections d'url gratuitHébergements gratuit de sitesEffet lightbox sur un blocSimple galerie d'imagesCréez votre site facilement avec WebSelfFabriquez votre site avec SiteWCréer un site gratuitement et facilement avec Wifeo