Geek Answers Handbook

Scrolling an overlay div without scrolling the entire page

I have a main page with some content. Then I have a modal that appears, which is larger than the screen itself, so I need to scroll it to see it. What do I need to do for my CSS to make only modal scroll div instead of whole page?

Here is the CSS for 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; }

Here is the 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>
+8
html css
source share
1 answer

Does the page have no scrollable except modal div? if so, you can try the position: fixed; On the page. modal should be outside with position: absolute;

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

Spell here

+4
source share

More articles:


All Articles