转自：http://www.jb51.net/article/34951.htm
效果图：
面遮罩弹出框已经不是一个陌生的话题了，实现的方法大同小异多种多样，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html,感兴趣的朋友可以参考下哈页面遮罩弹出框是最常见的一种情况，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html,
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
}
#main
{
height: 1800px;
padding-top: 90px;
text-align: center;
}
#fullbg
{
background-color: gray;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
z-index: 3;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
#dialog
{
background-color: #fff;
border: 5px solid rgba(0,0,0, 0.4);
height: 400px;
left: 50%;
margin: -200px 0 0 -200px;
padding: 1px;
position: fixed !important; /* 浮动对话框 */
position: absolute;
top: 50%;
width: 400px;
z-index: 5;
border-radius: 5px;
display: none;
}
#dialog p
{
margin: 0 0 12px;
height: 24px;
line-height: 24px;
background: #CCCCCC;
}
#dialog p.close
{
text-align: right;
padding-right: 10px;
}
#dialog p.close a
{
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="main">
<a href="javascript:showBg();">点击这里查看效果</a>
<div>
<a href="#" onclick="sayHi();" >Say Hi</a>
</div>
<div id="fullbg">
</div>
<div id="dialog">
<p class="close">
<a href="#" onclick="closeBg();">关闭</a></p>
<div>
正在加载，请稍后....</div>
</div>
</div>
<script type="text/javascript">
function sayHi() {
alert("Hi! Hi!");
}
//显示灰色 jQuery 遮罩层
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height: bh,
width: bw,
display: "block"
});
$("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
</body>
</html>
效果图：