How does reddit make the entire background go blackish when the login form pops up?

Question

Hi, when you click on the reddit register button, a nice window pops up and the rest of the screen goes blackish. you can click on the rest of the screen to close the pop up.

I know I could use the outermost div for this, but is that how reddit does it? are they changing the attributes of that outer div on the fly also?

Answer 1

They use a plugin similar to thickbox.

Answer 2

They create a div element with the following CSS properies:

/* Makes div cover page */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

/* Puts div over all other elements on page */
z-index: 1000;

/* Fills the div with a solid colour */
background-color: gray;

/* Makes div partially see-through */
opacity: 0.7;

The div for the login box then has its z-index set to 1001 so that it appears above the div overlay.

Steve

Answer 3

This technique is known as an overlay and is pretty trivial to implement:

#overlay {
    position: fixed;
    z-index:103;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background-color: gray;
    opacity: 0.7;
}

The full act of showing it is known as a modal window.

Check out a live sample of the CSS above.

All things considered, though, to have the floating DIV with the form and such, you're going to want to use one of the many plugins already made for this, such as Thickbox or jqModal.