Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS jQuery Basics (2014) Creating a Simple Lightbox Perfect

Tom Checkley
Tom Checkley
25,165 Points
Posted by Tom Checkley
Tom Checkley
25,165 Points

I'm using the append overlay code alongside showing pop up divs, it works fine, apart from some of the css

when a button on a nav bar is clicked the pop box opens with a higher z-index and the overlay gets put in behind it which works fine. My only trouble is that on a mobile device some of the pop ups height are taller than the window and when the user scrolls down the overlay cuts off where the bottom of the window would have been. How do i get it to implement the overlay over the whole document no matter if scrolled?

overlay{

background: rgba(0,0,0,0.7); width: 100%; height: 100%; position:absolute; margin-bottom: 0; top: 0; left: 0; display:none; }

3 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Hi Tom,

display: fixed;

or

height: 100vh; edit: this probably won't work as you would like by itself unless the above is set as fixed

If not, try height: auto or height: inherit. edit: this may be the better option for scrolling.

James Casavant
James Casavant
21,522 Points
James Casavant
James Casavant
21,522 Points

Have you attempted to set the z-index of your overlay in the CSS? Try adding something like the following to the overlay CSS you wrote above:

z-index: 100;

See if that moves it in the right direction, or go here for more information on how the z-index works.

Tom Checkley
Tom Checkley
25,165 Points
Tom Checkley
Tom Checkley
25,165 Points

Thanks James, Unfortunately its not that its not overlaying, it's that it is only taking the height of the window, not the whole document. When you scroll down it cuts off. Sorry, not sure I'm really describing the problem amazingly clearly.

James Casavant
James Casavant
21,522 Points

Try position: fixed instead of position: absolute.

If there is anyway to link to the page you are working on that would be helpful, I'm having a bit of difficulty seeing in my minds eye specifically what's happening, so the above may or may not work for the situation.

Tom Checkley
Tom Checkley
25,165 Points
Tom Checkley
Tom Checkley
25,165 Points

Thanks very much James and Sean,

position: fixed; height: 100%;

worked a charm!

ps James sorry I can't give you best answer points for a comment!

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

I edited my answer to include another option -- to change height to auto or inherit.