Simple full screen transparent div that allows scrolling

Question

I'm making a popup box that appears when a link is clicked. I want the background to be blacked out and am using a transparent full screen div to achieve this. I also want the box to be centered horizontally and vertically regardless of where on the page the user is looking.

When I do this, the black overlay doesn't extend to the bottom of the page. If you scroll down, the rest of the page is visible as normal. I also cannot get the popup to center properly.

Here's a jsFiddle demonstrating.

And here's my code:

HTML:

<div id="overlay">
    <!--- Make a really long page for demo --->
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
</div>

<div id="popup">Here is some text</div>

CSS:

#overlay
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 111;
    background-color: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}

#popup
{
    left: 30%;
    top: 40%;
    background-color: #FFF;
    z-index: 222;
    width: 300px;
    height: 200px;
    position: absolute;
}

Answer 1

You're going to need to change the absolute positioning to a fixed positioning, like so:

position: fixed;

DEMO