网页遮罩层效果
<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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
