很好的遮罩层

<!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" />
<title>demo</title>

<link rel="stylesheet" media="screen" type="text/css" href="css/jquery.jscrollpane.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/jquery.kinMaxShow-1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
/*弹出层*/
$(".pop").before('<div id="exposeMask"></div>').show();
/*滚动条*/
$(".scroll-pane").jScrollPane({
verticalDragMinHeight: 46,
verticalDragMaxHeight: 46,
horizontalDragMinWidth: 46,
horizontalDragMaxWidth: 46
});
});

});
/*关闭遮罩层*/
function close_pop(){
$(".pop").hide();/*弹出层隐藏*/
$("#exposeMask").remove();/*遮罩层去掉*/
}
</script>
<style type="text/css">
/*弹出层*/
.pop {
height: 300px;
width: 800px;
background:#6FC;
overflow:hidden;
position:absolute;
top:20%;
left:30%;
display:none;
z-index:1000;
}
/*遮罩层*/
#exposeMask {
background: none repeat scroll 0 0 #000000;
height: 100%;
left: 0;
opacity: 0.5;
position: fixed;
top: 0;
width: 100%;
z-index: 500;
}
.pop .btn_close {
position: absolute;
right:0px;
top:0px;
z-index:800;
}
.scroll-pane{
width:800px;
height:300px;
overflow:auto;
}
a:hover{
background-position:90% 0;
}
</style>

</head>

<body>
<div id="wrap"><div class="btn"><a></a></div></div>
<div class="pop">
<div class="scroll-pane">
<ul>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
</ul>
</div>
<div class="btn_close"><img onClick="close_pop();" src="images/close.png" /></div>
</div>
</body>
</html>