Javascript - Floating DIV Window With Background Fade Option

One cool effect that is popping up on a lot of sites is a nifty trick that will fade out the background then make a psuedo-window (I call it that, because it is really just a floating DIV) appear. Here is one way of doing that.

See it in action

Here in that page’s source

Here is a breakdown of the main pieces of the code.

The HTML

<div id="thewindow" style="display: none;width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;">

That sets up the actual “window”, named thewindow, and sets it’s style (which can also be in an external CSS file if you’d like). Take note that it is hidden (display: none), and it has 100% height and width, and it is absolutely positioned to 0,0.

<div id="thewindowbackground" style="width: 100%;height: 100%;background-color: #000000;position: absolute;opacity: .5;filter: alpha(opacity=50);"></div>

This sets up the background section of the window, this is what fades-in (and makes the page itself appear to fade-out). It is the same size as the actual “window”, and it’s opacity can be set to whatever for now (the javascript takes care of that, so you can leave it out if you’d like to). The background shouldn’t have any content.

The opacity property is for mozilla, safari, etc, and the filter is for IE.

<div id="thewindowcontent" style="background-color: #000000;position: absolute;left: 50%;top: 50%;width: 250px; height: 250px; margin-left: -125px;margin-top: -125px;">

This is the window content. It is aligned in the center. I do that by setting left and top 50%, then setting the margin-left and top to -125px (half the width, half the height). This is where the actual content goes.

<form><input type="button" value="Close" onClick="hideWindow();"></form>
<div style="color: #ffffff;">
Hello!
</div>

A simple close button and some white text.

</div>
</div>

Don’t forget to close off thewindowcontent then thewindow!

<form><input type="button" value="Show Window" onClick="showWindow();"></form>

You can do whatever you’d like for this, but I decided to make it a button. All this does is call the Javascript function showWindow() upon a mouse click.

Now For The Javascript…

end_opacity = 50; //end opacity, 25 = 25%, 50 = 50%, 100 = 100%, etc.
increase_opacity_by = 10; //how much to increase by each time the timeout ends
timeout = 100; //timeout in milliseconds, 0 = instant fade-out

The first line is the ending opacity for thewindowbackground. I made it 50%, so it makes the page content looked grayed-out. The next line is how much the script should increase the opacity every time there is a timeout, I would recommend making this a multiple of end_opacity. Timeout is how long the script should go before increasing thewindowbackground’s opacity by increase_opacity_by.

win = document.getElementById('thewindow');
winbackground = document.getElementById('thewindowbackground');
wincontent = document.getElementById('thewindowcontent');
cur_opacity = 0;

var timer = null;

This just grabs the elements from the page, and creates the cur_opacity var. A timer object is also made, this is set every time setTimeout() is called, but it is never used. It would be useful for a “cancel” button.

function showWindow() {
	if(timeout > 0) {
		cur_opacity = 0;
	
		winbackground.style.opacity = cur_opacity / 100;
		winbackground.style.filter = "alpha(opacity=" + cur_opacity + ")";
		win.style.display = 'block';
		wincontent.style.display = 'none';
	
		timer = setTimeout("increase_opacity()",timeout);
	}
	else {
		winbackground.style.opacity = end_opacity / 100;
		winbackground.style.filter = "alpha(opacity=" + end_opacity + ")";
		win.style.display = 'block';
		wincontent.style.display = 'block';
	}
}

That entire function is really simple. If timeout is an actual value the current opacity will be set to 0, and the background’s opacity will be set to 0. The window’s display is changed from none to block, but the window content’s display is now none (don’t want that to display until the fade is complete). The timeout is then started. If timeout is set to 0, the background is set to it’s end_opacity and the window is shown.

function increase_opacity() {
	cur_opacity += increase_opacity_by;

	winbackground.style.opacity = cur_opacity / 100;
	winbackground.style.filter = "alpha(opacity=" + cur_opacity + ")";
	
	if(cur_opacity < end_opacity) {
		timer = setTimeout("increase_opacity()",timeout);
	}
	else {
		wincontent.style.display = 'block';
	}
}

This function will increase cur_opacity, set the background’s opacity, then figure out if we should run another timeout. Please take note that you must divide cur_opacity by 100 for the style.opacity property, which uses decimals.

function hideWindow() {
	win.style.display = 'none';
}

For the close button.

Ways To Improve It

This script can pretty easily be improved. One way I can think of is to fade-in the content as well. Making the window moveable would also be pretty easy to do.

I tried this on IE 6 + 7, Firefox 2, Camino, Netscape, and Safari and it worked great on all of them.

Please subscribe, or else I will cry. Do you really want to make a programmer cry?