CSS 遮罩层、滑出页面

<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>