<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV CSS遮罩层</title>
<meta charset='utf-8'/>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.min.js"></script>
<style type="text/css">
#background{
display: none;
position: absolute;
top: 0%; left: 0%;
width: 100%; height: 100%;
background-color: black;
z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70); /*设置透明度*/
}
#show{
display: none;
position: absolute;
top: 25%; left: 22%;
width: 53%; height: 49%;
padding: 8px;
border: 5px solid #E8E9F7;
background-color: white;
z-index:1002; overflow: auto;
border-radius: 15px; /*设置为圆角*/
}
</style>
</head>
<body>
<input id="showdiv" type="button" value="显示遮罩层"/>
<!--遮罩层 start -->
<div id="background"></div>
<div id="show">测试文本<input id="hidediv" type="button" value="关闭"/></div>
<!--遮罩层 end -->
</body>
</html>
<script language="javascript" type="text/javascript">
//弹出遮罩层
$("#showdiv").click(function(){
$("#background").show();
$("#show").show();
});
//关闭遮罩层
$("#hidediv").click(function(){
$("#background").hide();
$("#show").hide();
});
</script>
