JavaScript Custom LightBox

A few people have asked me how to implement the div popup with a LightBox effect, like the one used when you click the Filter by APML link in the top right corner of this page. It’s actually very easy and it’s 100% JavaScript.

First, we need to add the semi-transparent div to lie on top of the entire page. This is done like so:

var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;

var layer = document.createElement(‘div’);
layer.style.zIndex = 2;
layer.id = ‘layer’;
layer.style.position = ‘absolute’;
layer.style.top = ‘0px’;
layer.style.left = ‘0px’;
layer.style.height = document.documentElement.scrollHeight + ‘px’;
layer.style.width = width + ‘px’;
layer.style.backgroundColor = ‘black’;
layer.style.opacity = ‘.6′;
layer.style.filter += (“progid:DXImageTransform.Microsoft.Alpha(opacity=60)”);
document.body.appendChild(layer);

Next we add a div in the middle of the page on top of the semi-transparent layer.

var div = document.createElement(‘div’);
div.style.zIndex = 3;
div.id = ‘box’;
div.style.position = (navigator.userAgent.indexOf(‘MSIE 6′) > -1) ? ‘absolute’ : ‘fixed’;
div.style.top = ‘200px’;
div.style.left = (width / 2) – (400 / 2) + ‘px’;
div.style.height = ‘50px’;
div.style.width = ‘400px’;
div.style.backgroundColor = ‘white’;
div.style.border = ‘2px solid silver’;
div.style.padding = ‘20px’;
document.body.appendChild(div);

And finally we put some text and a link that closes the popup when clicked:

var p = document.createElement(‘p’);
p.innerHTML = ‘Some text’;
div.appendChild(p);

var a = document.createElement(‘a’);
a.innerHTML = ‘Close window’;
a.href = ‘javascript:void(0)’;
a.onclick = function()
{
document.body.removeChild(document.getElementById(‘layer’));
document.body.removeChild(document.getElementById(‘box’));
};

div.appendChild(a);

I’ve tested this in Firefox 2+, Internet Explorer 6+, Safari 3 and Opera 9.23+ and it works in all of them. Here is an example HTML page that uses this method. It’s very simple to copy and modify.

Comments

Topics: Java, Web Development