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

This entry was posted on Tuesday, July 22nd, 2008 at 9:09 am and is filed under Java. 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.