2013-02-26 15 views
8

Ho una pagina principale con del contenuto. Poi ho una modale che appare più lunga dello schermo stesso, quindi devo scorrere per vederlo. Cosa devo fare al mio CSS per fare solo lo scroll modale div invece dell'intera pagina?scrolling overlay div senza scorrere l'intera pagina

Ecco il CSS per il modal

#overlay { 
    visibility: hidden; 
    position: absolute; 
    left: 45%; 
    width:auto; 
    border:1px solid #A17E13; 
    height:auto; 
    text-align:left; 
    z-index: 1000; 
} 
#overlay div { 
    background-color:#FCFBEC; 
} 

Ecco l'HTML:

<html><body> 
    <div>main page</div> 
    <div id="overlay"> 
    <div> 
     <div> 
      <asp:Label ID="test">Text for modal here</asp:Label> 
     </div> 
    </div> 
    </div> 
</body></html> 
+1

dove è il resto del codice. Con quello che mostri è impossibile vedere la tua struttura. –

+0

questo è tutto. La struttura è semplice div principale e quindi div separato per il modale. – user541597

+0

puoi limitare il tuo modal in modo che sia solo la dimensione dello schermo e non più grande? –

risposta

4

ha l'intera pagina non essere scorrevole ad eccezione del div modale? se è così puoi provare la posizione: fissa; sulla pagina. il modale deve essere all'esterno con la posizione: assoluto;

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#overlay { 
    /*visibility: hidden;*/ 
    position: fixed; 
    left: 45%; 
    width:auto; 
    border:1px solid #A17E13; 
    height:900px; 
    text-align:left; 
    background-color:orange; 
} 
.scroller { 
    height:3000px; 
    width:400px; 
    background-color:green; 
} 
</style> 
</head> 
<body> 
    <div id="overlay"> 
     this is not moving 
    </div> 

    <div> 
     <div class="scroller"> 
      <asp:Label ID="test">This is moving if big enough</asp:Label> 
     </div> 
    </div> 
</body> 
</html> 

Fiddle here

Problemi correlati