Simple CSS Lightbox

With this tutorial you will be able to create a lightbox effect like this with some simple web code.

This will be my first tutorial written with WP-Syntax, a syntax highlighting plug-in written by Ryan McGeary.

First you need to make sure the ol’ Javascript is enabled, so head on over to this page to have a wee check and change your settings if need be.

Now then, the first part I’ll show you is the CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#underlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	-moz-opacity:0.5;
	opacity:.50;
	filter:alpha(opacity=50);
}
#lightbox{
	display:none;
	position:absolute;
	top:100px;
	left:25%;
	width:50%;
	height:400px;
	background-color:#fff;
}

Lines 2 and 14: hides the elements by default (these will be overwritten later with Javascript).
Lines 3-7 and 15-19: sets the position and dimensions of the elements. Position should be either fixed or absolute. The other values can be either px (pixel), % (percentage) or em values.
Lines 9-11: sets 50% opacity in most browsers (if it doesn’t work in yours it will probably just show a matte black background when the lightbox shows up).

And the HTML:

1
2
3
4
5
6

<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('lightbox').style.display='block';">Click Here</a>
<div id="underlay">
</div>
<div id="lightbox">
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('lightbox').style.display='none';">Close</a>
</div>

Lines 1 and 5: the Javascript links that will show and hide the lightbox in your browser. They find the id attributes of the two div elements and reset their display style.

Put both of these together, enclosing the CSS in a style tag, and you get something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<style type="text/css">
#underlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	-moz-opacity:0.5;
	opacity:.50;
	filter:alpha(opacity=50);
}
#lightbox{
	display:none;
	position:absolute;
	top:100px;
	left:25%;
	width:50%;
	height:400px;
	background-color:#fff;
}
</style>
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('lightbox').style.display='block';">Click Here</a>
<div id="underlay">
</div>
<div id="lightbox">
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('lightbox').style.display='none';">Close</a>
</div>

Other examples:

You can also close the box by clicking outside of it, instead of having to click on the link. View this page to see how it works.

This is a page with the position of lightbox set to absolute.
And this is one set to fixed.
Scroll down each page to see what happens.

If you are interested in seeing the code involved in making these pages, you can view their page source (usually by pressing Ctrl + U or from within the View menu).

Remember, the values inside the CSS are mostly just numbers, so have a play around with them and see what they do.