We're going to try some lightbox techniques. Our goal is to display a photo as an overlay, covering everything else on the page.
1) First, click this paragraph to see the gray screen that covers the page. The screen is generated from the stylesheet (with the ID “overlay”). Then, click anywhere to remove the gray screen. Do it again. Be sure to scroll the page to see a flaw! (We did not disable scrolling.)
2) Okay, let's try it again and see how the scrolling gets disabled. Click this paragraph, then try to scroll. Click anywhere after that to remove the gray screen.
3) Next, we'll see how it looks with a white box, but no image. Click this paragraph to see the next step. Then click anywhere to remove the gray screen. Oh, and you'll have to click the white box separately to remove it.
4) We want to add a photo into that white box, so that's our next step. Once again, you'll see the result if you click this paragraph. You'll notice the photo is larger than the white box, so in fact you can't even see the white box. Click the photo separately to get rid of it.
5) Ah, more new steps! Click here! Now we can close everything just by clicking the photo. You'll see the changes commented in the JavaScript file -- we just moved some code down under the <img> part to make everything close all at once.
6) Now, to center the photo -- we add a function to the JavaScript we already had. This new function calculates the width and height of the browser viewport and also the position of the scroll within the page. Click this paragraph to see the difference. Click the photo to close it.