Sfondo semi-trasparente, tipo lightbox

**Threepwood** · 06-07-2010, 12:17

Salve a tutti!

Devo fare una cosa molto molto semplice con Js/CSS del tipo:

> Rendi sfondo grigio semi-trasparente
> display:block su un div definito (OK)

Senza appoggiarsi agli script lightbox esistenti, come faccio a fare il primo passaggio?

**bionicoz** · 06-07-2010, 12:56

crei preventivamente un div alto e largo 100% con z-index elevato, opacity:xx%, display: none, position: absolute e poi con javascript ontuoevento lo rendi visibile.

**Threepwood** · 06-07-2010, 13:09

Ho inserito un div (per ora visibile fisso) con queste caratteristiche

codice:

z-index:5000;
position:absolute;
width:100%;
height:100%;
left:0px;
top:0px;
background-color:#999999;

con filter: alpha(opacity=80); funziona solo con IE, cosaa uso per farlo funziare anche con chrome?

**Threepwood** · 06-07-2010, 13:16

Risolto

codice:

z-index:1000;
filter: alpha(opacity=80);
-moz-opacity:0.8; 
-khtml-opacity: 0.8; 
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
background-color:#000000;
display:none;

Grazie!

**bionicoz** · 06-07-2010, 13:16

mi scuso ho scritto il post precedente molto veloce, l'opacity è un valore da 0 a 1 e quindi niente %. se è spostato metti anche top:0 e left:0 (ovviamente quel div deve essere discendente diretto di <body>). ciao.

Edit: Hai fatto prima da solo!

**Threepwood** · 06-07-2010, 14:46

ho ancora un problemino

Div "dietro"

codice:

z-index:1000;
filter: alpha(opacity=80);
-moz-opacity:0.8; 
-khtml-opacity: 0.8; 
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
background-color:#000000;
display:none;

Div "maschera"

codice:

position:absolute;
background-color:#F0F0F0; 
display:none;
border:10px solid #cccccc; 
color:black; padding:2px;
z-index:5000;
width: 900px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -450px;

Così funziona con chrome, ma non con IE.. (con ie mi va sopra tutto il "dietro" e ho un po sfasato il div "maschera")

sembrerebbe un problema di z-index insomma...

**bionicoz** · 06-07-2010, 15:03

Non è che includi la maschera all'interno dell'overlay (il div con la trasparenza)? Ho provato a buttare giù due righe qui e mi pare funzionare.

**Threepwood** · 06-07-2010, 15:04

difatti, problema mio

Ho incluso anche lo script.aciolus per l'ordinamento visuale.. con Chrome funziona, con IE da quel problema...

Discussione: Sfondo semi-trasparente, tipo lightbox

Strumenti discussione

Ricerca discussione

Visualizza

Sfondo semi-trasparente, tipo lightbox

Permessi di invio