JavaScript Custom LightBox
Tuesday, July 22nd, 2008A 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);

