DeX Posted May 27, 2011 Share Posted May 27, 2011 I'm using a lightbox which currently only blacks out the visible portion of the screen. The problem is if you scroll down while the lightbox is showing, the portion you're scrolling down to isn't under the lightbox. How do I have the lightbox cover the entire page top to bottom? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>LIGHTBOX EXAMPLE</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style> </head> <body> <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p> <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> <div id="fade" class="black_overlay"></div> <div style = "height: 2000px;">Very large div</div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/237606-how-do-i-load-something-to-cover-the-entire-browser-height/ Share on other sites More sharing options...
monkeytooth Posted May 27, 2011 Share Posted May 27, 2011 black_overlay try the position as "fixed" (less the quotes) Quote Link to comment https://forums.phpfreaks.com/topic/237606-how-do-i-load-something-to-cover-the-entire-browser-height/#findComment-1221030 Share on other sites More sharing options...
cssfreakie Posted May 27, 2011 Share Posted May 27, 2011 Indeed position fixed or use javascript to get the height of the browser, since that is not the same as the height:100%; Quote Link to comment https://forums.phpfreaks.com/topic/237606-how-do-i-load-something-to-cover-the-entire-browser-height/#findComment-1221131 Share on other sites More sharing options...
DeX Posted May 28, 2011 Author Share Posted May 28, 2011 black_overlay try the position as "fixed" (less the quotes) This worked great, thanks! Quote Link to comment https://forums.phpfreaks.com/topic/237606-how-do-i-load-something-to-cover-the-entire-browser-height/#findComment-1221454 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.