Lightbox apertura pagina

**raygold** · 10-04-2011, 19:54

Ciao a tutti.
Vorrei sapere come è possibile creare un popup con effetto lightbox che si apra al caricamento della pagina e che si chiuda solo quando l'utente clicca sul link all'interno del lightbox.

Ecco un esempio di quello che vorrei ottenere:

**Prill** · 10-04-2011, 21:28

Così?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> 
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />

<title>titolo</title>

<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body{
background-color:green;
color:#fff
}

/* formattazione sfondo tipo lightbox e del div a scomparsa */

#sfondoPopup{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(255,255,255,0.5); /* da modificare parallelamente ai valori nel css per ie */
z-index:10
}
#popup {
position:absolute;
width:300px;  
height:300px;
top:50%;
margin-top:-150px; /* il margin-top sarà la metà dell'altezza */ 
left:50%;
margin-left:-150px; /* il margin-left sarà la metà della larghezza */
color:green;
background-color:yellow;
border:1px solid #ccc;
}
/* fine formattazione sfondo tipo lightbox e del div a scomparsa */


/* formattazione elementi interni del tutto indicativa */
#popup p#chiudi {
margin:10px;
text-align:right
}
#popup p {
margin:0 10px;
}  
#popup a{
color:green;
}
-->
</style>
<!--[if lte IE 8]>
<style type="text/css">
html, body{
height:100%;
}
#sfondoPopup{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); 
zoom: 1;}
</style><![endif]-->
</head>

<body>

<div id="sfondoPopup">
   <div id="popup">
        <p id="chiudi">CHIUDI</p>
      

contenuto popup contenuto popup contenuto popup contenuto popup contenuto popup contenuto popup contenuto popup contenuto popup</p>
  </div>
</div>

<div>
   

contenuto pagina contenuto pagina contenuto pagina</p>
</div>
</body>
</html>

**Prill** · 11-04-2011, 09:05

in effetti, ripensandoci, come soluzione quella prospettata è carente perché se i contenuti sono tanti e si scrolla il div con lo sfondo non copre tutta la pagina ma soprattutto se si naviga con javascript disattivato non si ha modo di chiudere questo div sovrapposto.
Si può cercare in rete uno script adatto e si risolve prima.
Ma restando a questo e cercando di dargli maggior senso: converrebbe impostare nel css per la popup un display:none lasciando allo script la funzione di renderlo visibile al caricamento della pagina; per il problema legato all'altezza della pagina invece si potrebbe nascondere lo scrolling e poi riattivarlo.
Non so nulla di javascript, e probabilmente uso un sistema opinabile - consigli e correzioni sono i benvenuti, le risposte sul forum sono un mezzo straordinario per imparare -, ma questa è la soluzione cui sono arrivata:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> 
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />

<title>titolo</title>

<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body{
background-color:green;
color:#fff
}
/* formattazione sfondo tipo lightbox e del div a scomparsa */

#popupContainer{
position:absolute;
display:none;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(255,255,255,0.5); /* da modificare parallelamente ai valori nel css per ie */
z-index:10
}
#popup {
position:absolute;
width:300px;  
height:300px;
top:50%;
margin-top:-150px; /* il margin-top sarà la metà dell'altezza */ 
left:50%;
margin-left:-150px; /* il margin-left sarà la metà della larghezza */
color:green;
background-color:yellow;
border:1px solid #ccc;
}
/* fine formattazione sfondo tipo lightbox e del div a scomparsa */


/* formattazione elementi interni del tutto indicativa */
#popup p#chiudi {
margin:10px;
text-align:right;
cursor:pointer;
}
#popup p {
margin:0 10px;
}  
#popup a{
color:green;
}
-->
</style>
<!--[if lte IE 8]>
<style type="text/css">
html, body{
height:100%;
}
#popupContainer{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); 
zoom: 1;}
</style><![endif]-->

<script type="text/javascript">
function pop(){
    document.documentElement.style.overflow = 'hidden';
    document.body.style.overflow = 'hidden';
    document.getElementById('popupContainer').style.display = 'block';

}
function unPop(){
    document.documentElement.style.overflow = 'auto';
    document.body.style.overflow = 'auto';
    document.getElementById('popupContainer').style.display = 'none';
}
</script>
</head>

<body onload="pop()">

<div id="popupContainer">
   <div id="popup">
        <p id="chiudi">CHIUDI</p>
      

contenuto popup </p>
  </div>
</div>

<div style="height:800px">
   

contenuto pagina </p>
</div>
</body>
</html>

**raygold** · 11-04-2011, 09:08

Grazie per il codice.
Ma avrei voluto ottenere un lightbox nella funzione modal,che impedisca all'utente di interagire con il resto della pagina.
Come posso realizzarlo?

Discussione: Lightbox apertura pagina

Strumenti discussione

Ricerca discussione

Visualizza

Lightbox apertura pagina

Permessi di invio