Overlay Scroll bar

Question

I've got a HTML page which I use some CSS and jQuery to produce a CSS style overlay lightbox effect.

The code can be seen here

resize the window height so the right hand scroll bar appears

When the lightbox appears, the parent page scrolling is disabled.

The problem I have is that when the browser window height is resized, the overlay starts to disappear into the top and bottom of the browser window, with no way to see the contents of it.

How can I alter my code, so that when the height of browser window is less than the height of the overlay div, then scroll bars show, allowing you to scroll to the top and bottom of the overlay div.

But at the same time keeping the background parent page scrolling disabled

Thanks

Answer 1

Solution: http://jsfiddle.net/LeZuse/nNdqX/. It is just a rough example, but enough to get you started. The idea is that once you want to show your popup, you disable the scrolling on body and show an overlay container with your desired popup content. Notice the CSS rules body.overlay and body.overlay #overlay that enable you to display everything with just $("body").addClass("overlay");