遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作。
制作原理很简单：1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景（重点是捕获内容div的大小位置）4设置点击触发按钮遮罩层背景内容同时显示或隐藏。
具体代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<title>demo</title>
<style type="text/css">
body{
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
.mask {
position: absolute;
top: 0px;
filter: alpha(opacity=);
background-color: #B2B2B2;
z-index: ;
left: 0px;
opacity:0.5;
-moz-opacity:0.5;
}
.content{
display:none;
padding:25px 20px;
width:600px;
border:1px solid #b2b2b2;
background:#fff;
z-index:;
position:fixed;
left:%;
top:%;
}
.content h3,.content p{
padding:10px;
background:#;
color:#fff;
}
#close{
cursor:pointer;
font-size:20px;
color:#;
position:absolute;
top:5px;
right:20px;
}
#open1{
width:90px;
color:#;
cursor:pointer;
padding:10px;
background:#;
color:#fff;
}
</style>
<script type="text/javascript">
$(function(){
$("#open1").click(function(){
$("#mask").css({
"height":$(document).height(),
"width":$(document).width()
}).show();
})
$("#open1").click(function(){
$(".content").show();
})
$("#close").click(function(){
$(".content").hide();
$("#mask").hide();
})
})
</script>
</head>
<body>
<div id="mask" class="mask"></div>
<div id="open1">点击显示遮罩层</div> <ul>
<li>网页内容</li>
<li>网页内容</li>
<li>网页内容</li>
<li>网页内容</li>
<li>网页内容</li>
<li>网页内容</li>
<li>网页内容</li>
<li>网页内容</li>
<li>网页内容</li>
<li>网页内容</li>
<li>网页内容</li> </ul>
<div class="content">
<h3>遮罩层内容</h3>
<p>遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作。
<br>
制作原理很简单：1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景（重点是捕获内容div的大小位置）4设置点击触发按钮遮罩层背景内容同时显示或隐藏。
</p>
<span id="close">x</span>
</div>
</body>
</html>
效果图：
更好的方法呢，我们可以利用jQuery插件--thickbox来构造遮罩层效果。
下载后引人相应的jQuery和css文件
<script src="scripts/jquery.thickbox.js" type="text/javascript"/>
<link rel="stylesheet" href="styles/thickbox.css" type="text/css"/>
然后为需要应用该效果的超链接元素添加class="thickbox"和title属性，它的href
值代表着需要弹出的图片，代表如下：
<a id="thickImg" href="images/pro_img/blue_one_big.jpg" class="thickbox" title="介绍文字">
<img src="data:images/look.gif" alt="点击查看大图"/>
</a>