网页遮罩层效果
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<script type="text/javascript" src="../js/jquery-1.5.1.js"></script>
<style type="text/css">
#bgOverlay {
background-color: gray;
z-index: 3;
opacity: 0.5;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
position: absolute;
top: 0;
left: 0;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
#contentOverlay {
background-color: white;
border: 5px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
height: 400px;
width: 700px;
position: absolute;
z-index: 5;
display: none;
margin-top: 100px;
margin-left: 200px;
}
</style>
<script type="text/javascript">
//显示遮罩层
function showOverlay()
{
var ht=$("body").height();
var wd=$("body").width();
$("#bgOverlay").css({
height:ht,
width:wd}
);
$("#bgOverlay,#contentOverlay").show();
}
//隐藏遮罩层
function closeOverlay()
{
$("#contentOverlay,#bgOverlay").hide();
}
</script>
</head>
<body>
<input type="button" onclick="showOverlay();" value="show">
<div id="bgOverlay"></div>
<div id="contentOverlay">
<input type="button" onclick="closeOverlay();" value="close"
style="margin-top: 10px; float: right; margin-right: 10px;">
<h3 style="text-align: center; margin-top: 100px;">需要显示的信息</h3>
</div>
</body>
</html>
