效果圖：

直接列出實現程式碼：

1.html

<div class="left_slide_center_nav">
    <!--蒙層-->
    <div class="center_mask"></div>
    <div class="center_content">
        <!-- 內容 -->
    </div>
</div>

2.css

/**蒙層*/
.left_slide_center_nav .center_mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.6);
    z-index: 1000;
    display: none;
}

/**內容*/
.left_slide_center_nav .center_content {
    position: fixed;
    width: 79%;
    top: 0;
    bottom: 0;
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -os-transition: all .4s;
    z-index: 99999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    overflow-y: scroll;
    background: #fff;
    -os-transform: translateX(-120%);
    transform: translateX(-120%);
}

/**顯示蒙層和內容 使用父級.show樣式控制*/
.left_slide_center_nav.show .center_mask {
    display: block;
}
.left_slide_center_nav.show .center_content {
    -os-transform: translateX(0);
    transform: translateX(0);
}
 

3.js控制樣式切換，顯示和隱藏

//顯示：
$(".left_slide_center_nav").addClass("show");


//點選蒙層關閉：
$(".left_slide_center_nav").on("click",".center_mask",function(){
    //隱藏：
    $(".left_slide_center_nav").removeClass("show");
});

注：

如果需要右往左滑出，css中的程式碼 transform: translateX(-120%) 可改為 transform: translateX(120%);引數值可自行修改。

如果需要上往下，或者下往上滑出，可以使用transform: translateY(-120%);  或者transform: translateY(120%);