WebDev Tutorials

Programming a lightbox-like effect with CSS and Javascript.

One way of really adding a professional touch to your website is with lightboxes. This is an effect where, when you have a popup, the rest of the website behind the popup darkens and blurs. A simplified version of the effect looks like this:

This effect is quite popular with Web 2.0 sites, and there are many libraries that allow you to use lightbox like effects. It doesn’t just look good to the visitors though- many people have found that the use of lightboxes will help with signups for their blog (if they use a signup form in the popup), or can even help with sales.

If you don’t want to use someone else’s library though (maybe because you’re worried about their size), you can implement your own lightbox surprising easily, with just a little CSS and Javascript.

Start by defining the CSS for the background. It looks like this:

#screenoverlay
{
	background-color: #CCCCFF; /* The color to display*/

	/* The transparency of the background */
	opacity: .75;
	filter: alpha(opacity=75);

	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;

	/* Set the overlay so it appears above the page content */
	z-index: 1000;
}

This CSS sets up the div we will use, so that it takes up the entire page (With the width/height 100% lines), and so that it appears above the rest of the page content (with the z-index line). You can change the color quite easily (Just alter the background-color line), and the transparency (or how “see-through” the overlay is), with the opacity and filter lines.

To use this CSS, we add the following just after the opening body tag.

	<div id="screenoverlay" style="visibility:hidden;"></div>

This will setup the overlay, and make sure that by default it is hidden. If you wish to see it while you are developing, you would just use this:

	<div id="screenoverlay"></div>

The next thing to do is setup the CSS for the popup itself. You can use various techniques for this- in this example I’ll just create a simple 200px X 200px, centered div.

The CSS for this is:

#topbox
{
	position: absolute;

	/* Default positioning, that will be overridden by the javascript */
	left: 0px;
	top: 0px;

	padding: 5px;
	width: 200px;
	height: 200px;
	background-color: #FFFFFF;

	/*Must use a z-index greater than the screen overlay*/
	z-index: 1001;
}

This sets up the div so that it is 200×200 (the width and height lines), has a white background, and is positioned in the top left corner. (The javascript will override this, so that the div is actually centered on the screen.)

Note the z-index: It’s important that this number is higher than the number for the screenoverlay, otherwise the popup will appear underneath instead of above.

Now we add the div to the HTML, right underneath the screenoverlay…

<div id="topbox" style="visibility:hidden;">
	<h3>Hey there!</h3>
	<a href='#' onclick="closeTop();return false;">Close</a>
</div>

This code adds the div to the page, and sets it to be hidden by default. The link code will call the javascript function ‘closeTop’ when it is clicked. (NB: Clicking the link wont actually go anywhere because of the ‘return false;’).

Underneath this, we add the normal page content.

You can bring up the popup any way you want, including mouse-overs, when a link is clicked, or using a delay. In this example, I’ll just bring up the popup when a link is clicked…

	<a href='#' onclick="showTop();return false;">
	Click here to display the lightbox...</a>

This calls the javascript function ’showTop’, when the link is clicked.

Now we get to the javascript functions. We only need 2, one to bring the popup up (showTop), and one to close it (closeTop).

At their simplest, these functions are just this:

<script type="text/javascript" language="javascript">
//<!--
function showTop()
{
	//Show the background overlay and topbox...
	document.getElementById('screenoverlay').style.visibility='visible';
	document.getElementById('topbox').style.visibility='visible';
}

function closeTop()
{
	//Hide the overlay and tobox...
	document.getElementById('screenoverlay').style.visibility='hidden';
	document.getElementById('topbox').style.visibility='hidden';
}
//-->
</script>

As you can see, the code just overrides the visibility of the CSS.

If you want to do anything more fancy, you can add extra code to showTop. If you wanted to actually change the popups content, you might set it by overriding innerHTML (eg: document.getElementById('topbox').innerHTML = ‘Hello World’;). In this example, we want to center the popup, so we will change showTop to…

function showTop()
{
	//Position the topBox. In this example I am just centering it on the screen
	boxWidth = 200;
	boxHeight = 200;

	screenWidth=document.all?document.body.clientWidth:window.innerWidth;
	screenHeight=document.all?document.body.clientHeight:window.innerHeight;

	xPos = (screenWidth - boxWidth) * 0.5;
	yPos = (screenHeight - boxHeight) * 0.5;

	document.getElementById('topbox').style.left=xPos;
	document.getElementById('topbox').style.top=yPos;

	//Show the background overlay and topbox...
	document.getElementById('screenoverlay').style.visibility = 'visible';
	document.getElementById('topbox').style.visibility = 'visible';
}

That’s it! Quite simple I think you’ll agree! Obviously you can add much more fancy effects, but hopefully now you understand the basics. If you want to see the example in action , click here.

Tags: css, Javascript, Lightbox

This entry was posted on Friday, November 28th, 2008 at 4:50 am and is filed under Design, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.