Hello, all.

I'm trying to create a "facebook-like" layer that is invisible when the page first loads but opens "above" the main page content when a link is clicked; something that has a dark 5px border with 75% opacity, but has an opaque white content area.

I think my issue is due to the content area being nested inside the div that I'm using to create the transparent border (it's slightly larger than the content area, and "below" it) because the content area has the same opacity as the border area.

Maybe I'm approaching this from the wrong direction. Any advice? Here's my code, thus far.

CSS:
Code:
#inner_vi {
	height:200px; width:600px; background-color:#FFF; z-index:10001;
	padding:0px; margin:0px; border:0px;
	opacity:1.0; filter: alpha(opacity=100); zoom:1;
	}
#visible_invisible.hidden {
	height:0px; width:0px; display:none; visibility:hidden; background-color:#999;
	padding:5px; margin:0px; border:0px; z-index:-10; position:absolute; top:0px; left:0px;
	}
#visible_invisible.shown {
	height:200px; width:600px; display:block; visibility:visible; background-color:#999;
	padding:5px; margin:0px; border:0px; z-index:10000;  position:absolute;
	opacity: 0.75; filter: alpha(opacity=75); zoom:1;
	}
JavaScript:
Code:
				function showHide(divName) {
					var body = document.getElementsByTagName("body")[0];
					var winWidth, winHeight;
					winWidth = getWidth(); winHeight = getHeight();

					thisDiv = document.getElementById(divName);
					if(thisDiv.className == 'hidden') {
							thisDiv.className = "shown";

							w = thisDiv.offsetWidth; h = thisDiv.offsetHeight;

							l = (winWidth-w)/2; t = (winHeight-h)/2;

							thisDiv.style.left = l + "px"; thisDiv.style.top = t + "px";
						}
					else {
							thisDiv.className = "hidden";
						}
					}
				function getWidth() {
					if (typeof window.innerWidth != 'undefined') {
					      return window.innerWidth;
					 	}
					else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
					       return document.documentElement.clientWidth;
					 	}
					else {
					       return document.getElementsByTagName('body')[0].clientWidth;
					 	}
					}
				function getHeight() {
					if (typeof window.innerWidth != 'undefined')
					 {
					      return window.innerHeight;
					 }
					else if (typeof document.documentElement != 'undefined'
					     && typeof document.documentElement.clientWidth !=
					     'undefined' && document.documentElement.clientWidth != 0) {
					       return document.documentElement.clientHeight;
					 }
					else {
					      return document.getElementsByTagName('body')[0].clientHeight;
					 }
					}
HTML:
Code:
			<div id="visible_invisible" class="hidden">
				<div id="inner_vi">
					<a href="javascript:void(0);" onClick="showHide('visible_invisible');">Hide Layered Div</a>
				</div>
			</div>
			<a href="javascript:void(0);" onClick="showHide('visible_invisible');">Open Layered Div</a>
^_^