Html glass pane

Hi,
I want to make a glass-pane that disables the rest of my screen kind of like a lightbox.
There are plenty of scripts out there, but i didnt find any one sharing the source code or giving out the solutions, rather they insist on using thier own libraries...

here is what i attempted:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Glass effect tester</title>
<script>
	function toggleGlass()
	{
		var div = document.getElementById("glass");
		if(div.style.display=="none")
		{
			div.style.display="";
		}
		else
		{
			div.style.display="none";
		}
	}
</script>

</head>

<body style="margin:0px;height:100%;">
<div id="glass" style="display:none;width:100%;height:100%;position:absolute;">
	<div style="z-index:4;position:absolute;color:#FFFFFF;">
		Modal stuff
		<input type="button" name="Button" value="Modal button" onClick="javascript:toggleGlass();">
	</div>
	<div style="background-color:#000000;width:100%;height:100%;position:absolute;opacity:0.8;filter:alpha(opacity=80);z-index:1;">test</div>
</div>

Code seems to work fine, however if you scroll down, you will discover that the rest of the page is still accessible in all browsers.

I guess that i could also take care of that by putting the entire page in a div and setting its overflow to auto with width and height as 100%,
but i dont think its a good solution,

Does any one have better ideas ?

Well, got it to work finally,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Glass effect tester</title>
<script>
	function toggleGlass()
	{
		var div = document.getElementById("glass");
		if(div.style.display=="none")
		{
			div.style.display="";
			//Turns out that i need to set the height, merely 100% wont work !!
			div.style.height = document.documentElement.scrollHeight + 'px';
		}
		else
		{
			div.style.display="none";
		}
	}
</script>
</head>

<body style="margin:0px;height:100%;">
	<div id="glass" style="display:none;width:100%;height:100%;position:absolute;">
		<div style="z-index:4;position:absolute;color:#FFFFFF;">
			Modal stuff
			<input type="button" name="Button" value="Modal button" onClick="javascript:toggleGlass();">
		</div>
		<div style="background-color:#000000;width:100%;height:100%;position:absolute;opacity:0.8;filter:alpha(opacity=80);z-index:1;">test</div>
	</div>
	
	<select name="select">
	  <option value="one" selected>one</option>
	  <option value="two">two</option>
	</select>
	<input type="button" name="Button" value="Test" onClick="javascript:toggleGlass();">
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
	<h3>Huge page</h3>
</body>
</html>

Hope this benefits someone ....

You're code looks like it might only work in IE. Is this the case?

Tested to work fine in
IE7, FF3.0,chrome5.0,safari4

I would really like to know if it renders fine on opera.

The tab key is fun! Try it!

Eric

Damn you testers !!!

Hey but i tried pressing tab, it didnt focus the select box...
in IE and FF

good bug btw

guess i will have to run a loop to disable all elements when showning the glass plane

No need to test, just common sense.

Eric

So, is it a bug ?
"works for me"