JS简单遮罩届面

<meta charset=utf-8>
<style type="text/css">
#bg
{
	display:none;
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:#000000;
	z-index:1;
	opacity:0.5;
}
#show
{
	display:none;
	position: absolute;
	top:25%;
	left:22%;
	width:50%;
	height:50%;
	background:#FFFFFF;
	z-index:2;
	border:20px solid #E8E9F7;
}
</style>
<input id="btnshow" type="button" value="显示" onclick="showdiv()"/>
<div id="bg"></div>
<div id="show">
	<div style="text-align:right"><input id="btnclose" type="button" value="关闭" onclick="hidediv()"/></div>
	<div>
		<div style="width:300px;height:240px;float:left;background:#c7d7e7">
		</div>
		<div style="width:300px;height:240px;float:left;background:#0663a8">
		</div>
	</div>
</div>
<script language="javascript">
function showdiv()
{
	document.getElementById("bg").style.display="block";
	document.getElementById("show").style.display="block";
}
function hidediv()
{
	document.getElementById("bg").style.display="none";
	document.getElementById("show").style.display="none";
}
</script>