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 ....