Greybox/Lightbox

This script function helps user to display any advertisement(ad) or slideshow while the page is visited.

Features

This greybox/lightbox javascript overlay images on the current page.
Greybox script is like a popup window used in javascript instead it overlaps the previous element like <form>.
Lightbox script is used in most web pages to display the advertisement or slideshows while moving the mouse over the image or while loading the page.
This script uses iframe tag to hide/overlap the form element.

Preview

Mouse Over the Image

Downloads

Javascript Code

<script type="text/javascript">
var browserName=navigator.appName;
var left_align = 268; // Set the left position to center the greybox
var top_align = 134;
// Set the top position to center the greybox
function disp(){if(browserName == "Netscape"){var stop = document.documentElement.scrollTop;
document.getElementById('ebox1').style.height=document.body.offsetHeight+"px";document.getElementById('s').style.position = "fixed";
}else{var stop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;window.onscroll=mveditbox;}document.getElementById('s').style.display = 'block'; document.getElementById('ebox1').style.display='block'; document.getElementById('frm').style.opacity = 5/10;document.getElementById('frm').style.filter = 5/10;document.getElementById('ebox1').style.zIndex=100; document.getElementById('s').style.zIndex=1000; document.getElementById('ebox1').style.top=stop+"px";var top_pos = stop+top_align;
document.getElementById('s').style.top= top_pos+"px";var sleft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;var left_pos = sleft+left_align;document.getElementById('s').style.left= left_pos+"px";
}
function hide(){document.getElementById('s').style.display='none';document.getElementById('frm').style.opacity = 100;document.getElementById('ebox1').style.display='none';
}
function mveditbox() {var stop =window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;document.getElementById('ebox1').style.top=stop+"px";var tot = stop+top_align;
document.getElementById('s').style.top= tot+"px";document.getElementById('ebox1').style.height = document.body.clientHeight+"px";
}
</script>

HTML Code

Release Date - 16-06-2009
Get free version without ©copyright link for just $5/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Here we have explained with a form

<iframe> is used to display the greybox by overlapping the form as,

<iframe frameborder=1 id='ebox1' width=100% height=100% bgcolor=#808080 style='display: none; position:absolute; top: 0px; left: 0px;filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;background-color: #808080;'>
</iframe>

Note: <iframe> should be placed at the top of the page(under ) to make it work in all browsers.

Function disp() can be called in any event. For example,

<body onload="disp();">
<input type=button/image onClick="disp();">

Place your form before the div tag which displays the greybox.
Place your code in the div tag,

<div align=center>"Your Code Here"</div>

You can change the top and left position of the greybox image inorder to center align in the browser window.

var left_align = 268; // Set the left position to center the greybox
var top_align = 134;  // Set the left position to center the greybox

mveditbox() is used inorder to have the greybox till the end of the page while scrolling.
Just copy the code and use it for free.

License

The javascript (misspelled as java script) is given under GPL License.
i.e. Free use for those who use it as it is.
Free, if your modification does not remove our copyright information and links.
Detailed License information can be found here.
You can purchase the script if your requirements does not meet GPL License terms.