Almost forgot the copy/paste test case:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
#fadedBackground{
position:absolute;
background-color:black;
filter:alpha(opacity=30);
-moz-opacity:.30;
opacity:.30;
top:expression(this.offsetParent.scrollTop);/*IE only*/
z-index:1;
}
#myTable{position:absolute;z-index:2;background-color:gray;}
</style>
<script language="JavaScript">
function fadeBackground() {
var d = document.getElementById("fadedBackground");
if(d.style.visibility=="hidden"){
if(navigator.userAgent.indexOf("Firefox")!=-1)
{d.style.position="fixed";}
//IF LINE ABOVE IS NOT USED FOR FF, BACKGROUND DOES NOT COVER
SCROLLING AREA
d.style.visibility = "visible";
d.style.height = "100%";
d.style.width = "100%";
}else if(d.style.visibility=="visible"){
d.style.visibility = "hidden";
d.style.height = "0px";
d.style.width = "0px";
}
}
</script>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0">
<div id="fadedBackground" style="visibility:hidden;"
onClick="fadeBackground();"></div>
<table id="myTable" cellpadding=5>
<tr><td><input type="text" value="Where is Cursor?"></td></tr>
</table>
<br><br><a href="javascript
:void(0)" onClick="fadeBackground();">Click
Here to Change Background</a>
<br><br><br><br><br><br><br><br><br><br><br><br><b r><br><br><br><br><br><br><br><br><br><br><br><br >
<br><br><br><br><br><br><br><br><br><br><br><br><b r><br><br><br><br><br><br><br>
</body>
</html>
