• Note – remember that this requires the prototype.js script
• Note – I did test this in Opera 8.52 and the overlay does not completely cover the page and completely disappear.

Lightbox code:

/*--------------------------------------------------------------------------*/
/*Lightbox
*This is a script for creating modal dialog windows
* (like the ones your operating system uses)
*
*/

var Lightbox = {

yPos : 0,
isIE : (navigator.userAgent.toLowerCase().indexOf('msie') != -1) ? true : false,

/* hideAll - closes all open lightbox windows */
hideAll: function(){
lboxes = document.getElementsByClassName('lbox')
lboxes.each(function(box){
Element.hide(box)
}
)
if ($('overlay')){
Element.remove('overlay');
}

// if ie
if(Lightbox.isIE) {
Lightbox.setScroll(0,Lightbox.yPos);
Lightbox.prepareIE("auto", "auto");

// show all the document's selects since we are hiding the lightbox
Lightbox.toggleSelects('visible');
}
},

toggleSelects: function(visibility){
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
},

// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
prepareIE: function(height, overflow){
bod = document.getElementsByTagName('body')[0];
bod.style.height = height;
bod.style.overflow = overflow;

htm = document.getElementsByTagName('html')[0];
htm.style.height = height;
htm.style.overflow = overflow;
},

// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
getScroll: function(){
if (self.pageYOffset) {
this.yPos = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
this.yPos = document.documentElement.scrollTop;
} else if (document.body) {
this.yPos = document.body.scrollTop;
}
},

setScroll: function(x, y){
window.scrollTo(x, y);
}
}

Lightbox.base = Class.create();
Lightbox.base.prototype = {

initialize: function(element, options){
//start by getting the current scroll position and hiding all lightboxes
Lightbox.getScroll();
Lightbox.hideAll();

this.element = $(element);
this.options = Object.extend({
lightboxClassName : 'lightbox',
closeOnOverlayClick : false,
externalControl : false
}, options || {} )

//create the overlay
new Insertion.Before(this.element, "<div id='overlay' style='display:none;'>");

if(Lightbox.isIE) {
// find out if the css style is a percentage or not
var overlayWidthCSS = null;
var overlayHeightCSS = null;
var overlayTopCSS = null;
var overlayLeftCSS = null;

this.widthPercent = null;
this.heightPercent = null;
this.leftPercent = null;
this.topPercent = null;

try {
overlayWidthCSS = Element.getStyle(overlay, "width").toString();

var percIndex = overlayWidthCSS.indexOf("%");
if(percIndex != -1 && percIndex  this.widthPercent = parseInt(overlayWidthCSS);
}
} catch(err) { }

try {
overlayHeightCSS = Element.getStyle(overlay, "height").toString();

var percIndex = overlayHeightCSS.indexOf("%");
if(percIndex != <del>1 && percIndex  overlayHeightCSS.length1) {
this.heightPercent = parseInt(overlayHeightCSS);
}
} catch(err) { }

try {
overlayTopCSS = Element.getStyle(overlay, “top”).toString();

var percIndex = overlayTopCSS.indexOf(“%”);
if(percIndex != -1 && percIndex  overlayTopCSS.length - 1) {
this.topPercent = parseInt(overlayTopCSS);
} else {
}
} catch(err) { }

try {
overlayLeftCSS = Element.getStyle(overlay, "left").toString();

var percIndex = overlayLeftCSS.indexOf("%");
if(percIndex != <del>1 && percIndex  overlayLeftCSS.length1) {
this.leftPercent = parseInt(overlayLeftCSS);
} else {
}
} catch(err) { }
}

Element.addClassName(this.element, this.options.lightboxClassName)

//also add a default lbox class to the lightbox div so we can find and close all lightboxes if we need to
Element.addClassName(this.element, ‘lbox’)

//Tip: make sure the path to the close.gif image below is correct for your setup
closer = ‘’

//insert the closer image into the div
new Insertion.Top(this.element, closer);

Event.observe($(‘close’), ‘click’, this.hideBox.bindAsEventListener(this) );

if (this.options.closeOnOverlayClick){
Event.observe($(‘overlay’), ‘click’, this.hideBox.bindAsEventListener(this) );
}
if (this.options.externalControl){
Event.observe($(this.options.externalControl), ‘click’, this.hideBox.bindAsEventListener(this) );
}

this.showBox();
},

showBox : function(){
// if ie
if(Lightbox.isIE) {
Lightbox.getScroll();
Lightbox.prepareIE(‘100%’, ‘hidden’);
Lightbox.setScroll(0,0);

// hide all the document’s selects since you’re showing the lightbox
Lightbox.toggleSelects(‘hidden’);

// show the local selects
this.toggleBoxSelects(‘visible’);

var bodyDim = Element.getDimensions(document.getElementsByTagName(‘body’)[0]);
var overlay = $(‘overlay’);
var overlayDim = Element.getDimensions(overlay);
var cumulativeOffset = Position.cumulativeOffset(overlay);
var realOffset = Position.realOffset(overlay);

if(this.widthPercent != null && !isNaN(this.widthPercent)) {
overlay.style.width = bodyDim.width*this.widthPercent/100;
}

if(this.heightPercent != null && !isNaN(this.heightPercent)) {
overlay.style.height = bodyDim.height*this.heightPercent/100;
}

if(this.leftPercent != null && !isNaN(this.leftPercent) && !isNaN(bodyDim.width)) {
overlay.style.left = parseInt(bodyDim.width*this.leftPercent/100);
} else {
try {
var left = parseInt(Element.getStyle(overlay,’left’));
if(!isNaN(left))
overlay.style.left = parseInt(-cumulativeOffset[0])+2*left; // value of body left is included in cumulativeOffset
} catch(err) {}
}

if(this.topPercent != null && !isNaN(this.topPercent) && !isNaN(bodyDim.height)) {
//alert(“Calculating new top:nthis.topPercent: “+ this.topPercent +
//”nbodyDim.height: ” + bodyDim.height +
//”ncumulativeOffset[1]: ” + cumulativeOffset[1]);
//alert(“new top = ” + parseInt(bodyDim.height*this.topPercent/100));
overlay.style.top = parseInt(bodyDim.height*this.topPercent/100);
} else {
try {
var top = parseInt(Element.getStyle(overlay, ‘top’));
//alert(“top=” + top + “, cumulativeOffset[1]=” + cumulativeOffset[1] + “, realOffset[1]=” + realOffset[1]);
if(!isNaN(top)) {
overlay.style.top = top; // value of body top is NOT included in cumulativeOffset
}
} catch(err) {}
}
}

//show the overlay
Element.show(‘overlay’);

//center the lightbox
this.center();

//show the lightbox
Element.show(this.element);
return false;
},

toggleBoxSelects : function(visibility) {
// Must have try catch because not all elements have the function getElementsByTagName
try {
var selects = this.element.getElementsByTagName(‘select’);
for(i = 0; i < selects.length; i++) {
//alert(“toggling visibility to ‘” + visibility + “’ of select ‘” + selects[i].name + “’, currently set at ‘” + selects[i].style.visibility + “’”);
selects[i].style.visibility = visibility;
}
} catch (err) {}
},

hideBox : function(evt){
// if ie
if(Lightbox.isIE) {
Lightbox.setScroll(0,Lightbox.yPos);
Lightbox.prepareIE(“auto”, “auto”);

// show all the document’s selects since we are hiding the lightbox
Lightbox.toggleSelects(‘visible’);
}

Element.removeClassName(this.element, this.options.lightboxClassName)
Element.hide(this.element);
//remove the overlay element from the DOM completely
Element.remove(‘overlay’);
return false;
},

center : function(){
var my_width  = 0;
var my_height = 0;

if ( typeof( window.innerWidth ) == ‘number’ ){
my_width  = window.innerWidth;
my_height = window.innerHeight;
}else if ( document.documentElement &&
( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ){
my_width  = document.documentElement.clientWidth;
my_height = document.documentElement.clientHeight;
}
else if ( document.body &&
( document.body.clientWidth || document.body.clientHeight ) ){
my_width  = document.body.clientWidth;
my_height = document.body.clientHeight;
}

this.element.style.position = ‘absolute’;
this.element.style.zIndex   = 99;

var scrollY = 0;

if ( document.documentElement && document.documentElement.scrollTop ){
scrollY = document.documentElement.scrollTop;
}else if ( document.body && document.body.scrollTop){
scrollY = document.body.scrollTop;
}else if ( window.pageYOffset ){
scrollY = window.pageYOffset;
}else if ( window.scrollY ){
scrollY = window.scrollY;
}

var elementDimensions = Element.getDimensions(this.element);

var setX = ( my_width  – elementDimensions.width  )/ 2;
var setY = ( my_height – elementDimensions.height )/ 2 + scrollY;

setX = ( setX < 0 ) ? 0 : setX;
setY = ( setY < 0 ) ? 0 : setY;

this.element.style.left = setX + “px”;
this.element.style.top  = setY + “px”;

}
}

what do you put in the question marks??