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>