Freeze and dim page content, then overlay new content and let that be scrollable?

Question

Basically what I'm going for is what http://pinterest.com does when you click an image on the homepage.

How would one make the page unscrollable, but the new content overlayed scrollable?

Answer 1

You can use the css position for the container holding the initial page and set it to fixed. This plus a fixed height will get you a page that keeps position (also, be sure to set overflow: hidden).

Then the container you want on top used fixed position also but give it a margin to make it sit in the center of the page. For this one set overflow: scroll or overflow: auto

More information on positions can be found here with examples:

http://www.w3schools.com/cssref/pr_class_position.asp