<style>
.panel_bak
{
position:fixed;
bottom:0;
display:none;
width:100%;
margin:0px;
padding:5px;
text-align:center;
background:#fff;
padding:15px;
}
.line_bak{
height:35px;
line-height:35px;
text-align:center;
}
.bak{
position:fixed;
top:0;
left:0;
background-color: rgba(0,0,0,.5);
height:20px;
width:100%
}
</style>
<body>
//遮罩层
<div class=‘bak‘></div>
//滑出页面+遮罩层
<div class="panel_bak" >
<div class=‘line_bak‘></div>
<div class=‘line_bak‘></div>
<div class=‘line_bak‘></div>
<div class=‘bak‘></div>
</div>
</body>
//滑出页面+遮罩层
<script>
$(".panel_bak").empty();
//弹出页面添加高度
var height = $(".line_bak").length * 35 + 20;
$(".panel_bak").after("<div class=‘bak‘></div>");
//添加 min-height
if( height <= 250){
//遮罩层添加最大高度
var bak_height = $(window).height() - 250;
height = 250;
}else{
//遮罩层添加对应高度
var bak_height = $(window).height() - height;
}
$(".bak").css("height",bak_height);
$(".panel_bak").css("height",height).slideToggle("fast");
$(".line_bak").click(function(t){
$(".panel_bak").slideUp("fast");
$(".bak").slideUp("fast");
})
</script>
原文：http://www.cnblogs.com/malvina/p/5147762.html