LightBox personalizzato

**Deianira** · 11-09-2008, 12:37

volevo creare un lightbox che non segua gli esempi in rete, cioè non usi librerie come jQuery, usi inline content e si attivi tramite onload della pagina.
Ho creato a questo proposito questo script , ma putroppo non riesco a farlo funzionare correttamente, cioè non mi funziona il chiudi del lightbox e non ha un corretto funzionamento in IE6.Vi poto quello che ho creato nella speranza che qualcuno mi sblocchi da questo punto morto dov sono arrivata...
Un grazie atutti coloro che risponderanno.

CSS
#box_scadenze {
position:fixed;
display:block;
background:url(static/img/box490x215.gif) no-repeat;
width:490px;
height:215px;
z-index: 102;
color:#000000;
text-align:left;
}

* html #box_scadenze { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#box_scadenze_title {background:url(static/img/h_scadenze.gif) no-repeat; width:490px; height:35px;}
#listScadenze {width:410px;height:140px;overflow:auto;top:35px;p adding-bottom:5px;padding-left:20px;padding-right:20px;}
#box_closer {text-align:center; position:relative; left:50%; margin-left:-25px; width:50px; height:20px; z-index:1000;}
#box_closer span {color:#ff0000;}
#box_closer a {text-decoration:none; display:block;}
/*-- IL NUOVO BOX SCADENZE --*/
#oscuratore{
position:fixed;
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
z-index: 100;}

<script type="text/javascript">
function lightBox() {
document.getElementById("oscuratore").style.displa y= "block";var element = document.getElementById("home_focus_content");real Content = element.innerHTML;element.innerHTML = "<div id='box_scadenze'><div id='box_scadenze_title'></div><div id='listScadenze'><ul class='dotlist'>[*]<span>09 09 2008</span> - Vado lontano...in nave![*]<span>16 09 2008</span> - OK...sono scaduto![/list]</div><div id='box_closer'><span>Chiudi</span></div></div>";function closePopup() { element.innerHTML = realContent; document.getElementById("home_focus_content").styl e.display= "none";document.getElementById("oscuratore").style .display= "none";}}
</script>

<body onload="lightBox();">
<div id="oscuratore" style="display:none;"></div>
<div id="home_focus_content" style="display:none;"></div>

**artorius** · 11-09-2008, 12:56

scusa, ma sei sicuro di 'sta roba?

margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');

**Deianira** · 11-09-2008, 13:24

Si hai ragione scusa questo è quello giusto ...ho postato quello sbagliato...

/*-- IL NUOVO BOX SCADENZE --*/
#box_scadenze {
position:fixed;
display:block;
background:url(static/img/box490x215.gif) no-repeat;
width:490px;
height:215px;
z-index: 102;
color:#000000;
text-align:left;
}

* html #box_scadenze { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (box_scadenze = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#box_scadenze_title {background:url(static/img/h_scadenze.gif) no-repeat; width:490px; height:35px;}
#listScadenze {width:410px;height:140px;overflow:auto;top:35px;p adding-bottom:5px;padding-left:20px;padding-right:20px;}
#box_closer {text-align:center; position:relative; left:50%; margin-left:-25px; width:50px; height:20px; z-index:1000;}
#box_closer span {color:#ff0000;}
#box_closer a {text-decoration:none; display:block;}
/*-- IL NUOVO BOX SCADENZE --*/
#oscuratore{
position:fixed;
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
z-index: 100;
margin:0;
padding:0;
}

* html #oscuratore{ /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

**Deianira** · 11-09-2008, 17:10

qualcuno che può dari una mano?So che non si chiede, ma altrimenti il mio quesito va sotto tutti...

**alexforum** · 11-09-2008, 23:03

ciao,
ti consiglio di postare il codice in maniera ordinata( indentato ),
diventa difficile poterti aiutare con un codice poco leggibile, dovresti postare così:

codice:

 <script type="text/javascript">
    function lightBox() {
        document.getElementById("oscuratore").style.display= "block";
     ...
</script>

**Deianira** · 12-09-2008, 15:55

[FONT=arial]Riposto il codice:

#box_scadenze {
position :fixed;
display:block;
background:url(static/img/box490x215.gif) no-repeat;
width:490px;
height:215px;
z-index: 102;
color:#000000;
text-align:left;
}

* html #box_scadenze { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (box_scadenze = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#box_scadenze_title {background:url(static/img/h_scadenze.gif) no-repeat; width:490px; height:35px;}
#listScadenze {width:410px;height:140px;overflow:auto;top:35px;p adding-bottom:5px;padding-left:20px;padding-right:20px;}
#box_closer {text-align:center; position:relative; left:50%; margin-left:-25px; width:50px; height:20px; z-index:1000;}
#box_closer span {color:#ff0000;}
#box_closer a {text-decoration:none; display:block;}

#oscuratore{
position:fixed;
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
z-index: 100;}
<script type="text/javascript">
function lightBox() {
document.getElementById("oscuratore").style.displa y= "block";
var element = document.getElementById("home_focus_content");
realContent = element.innerHTML;
element.innerHTML = "<div id='box_scadenze'><div id='box_scadenze_title'></div><div id='listScadenze'><ul class='dotlist'>[*]<span>09 09 2008</span> - Vado lontano...in nave![*]<span>16 09 2008</span> - OK...sono scaduto![/list]</div><div id='box_closer'>
<span>Chiudi</span></div></div>";

function closePopup() { element.innerHTML = realContent;
document.getElementB("home_focus_content").style.d isplay= "none";
document.getElementById("oscuratore").style.displa y= "none";
}
}
</script>
<body onload="lightBox();">
<div id="oscuratore" style="display:none;"></div>
<div id="home_focus_content" style="display:none;"></div>

_____________[/FONT]

Discussione: LightBox personalizzato

Strumenti discussione

Ricerca discussione

Visualizza

LightBox personalizzato- Help

Permessi di invio