使用html,css,js实现遮罩层和侧边栏效果

注：点击查看订单，从侧边打开侧边栏，显示遮罩层，点击遮罩层隐藏侧边栏

html：

遮罩层：

<div class="mark"></div>

侧边栏：

    <div id="side-menu">
        <div id="side-menu-inner">
            <div class="orderHeader">
                <div>订单详情</div>
                <div>订单编号：SX21010078</div>
            </div>

            <h3 class="panel-title">贷款产品信息</h3>
            <div class="col-md-12 infoBody">
                <div class="col-md-5 gray">
                    产品名称：
                    <div class="black">普惠车主消费贷款（产品ABC）</div>
                </div>
                <div class="col-md-4 gray">
                    抵押方式：
                    <div class="black">车抵贷（产品DEF）</div>
                </div>
                <div class="col-md-3 gray">
                    银行/金融机构：
                    <div class="black">银行/金融机构</div>
                </div>
            </div>

            <h3 class="panel-title">贷款申请信息</h3>
            <div class="col-md-12 infoBody">
                <div class="col-md-1-5 gray">
                    借款人：
                    <div class="blueBig">张三</div>
                </div>
                <div class="col-md-1-5 gray">
                    贷款总额：
                    <div><span class="blueBig">30</span><span class="black">万元</span></div>
                </div>
                <div class="col-md-1-5 gray">
                    贷款期限：
                    <div><span class="blueBig">36</span><span class="black">期</span></div>
                </div>
                <div class="col-md-1-5 gray">
                    当前抵押：
                    <div><span class="blueBig">4</span><span class="black">辆</span></div>
                </div>
                <div class="col-md-1-5 gray">
                    抵押价值：
                    <div><span class="blueBig">20</span><span class="black">万元</span></div>
                </div>
            </div>
        </div>
    </div>

css:

   {# 侧边栏样式 #}
    <style>

        #side-menu {
            z-index: 100;
            background-color: lightgrey;
            display: block;
            position: fixed;
            top: 0px;
            right: 0px;
            bottom: 0px;
            width: 550px;
            transition: transform 200ms ease-in;
            transform: translateX(100%);
        }


        #side-menu-inner {
            display: block;
            height: 100%;
            width: 100%;
            padding: 20px 20px 20px 20px;
            background-color: #ECEFF7;
        }

        .orderHeader {
            height: 50px;
            line-height: 50px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            background-color: white;
            border-radius: 5px;
            padding: 0px 10px 0px 10px;
            margin: 10px 0px 10px 0px;
        }

        .panel-title {
            border-left: 4px solid #0984FF;
            padding-left: 10px;
            display: flex;
            font-size: 15px;
        }

        .infoBody {
            background-color: white;
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0px 10px 0px;
        }

        {# 媒体查询dialog #}
        @media (min-width: 768px) {
            .col-md-1-5 {
                width: 20%;
                float: left;
            }
        }


    </style>

    <style>
        .mark {
            position: fixed;
            left: 0;
            top: 0;
            opacity: .5;
            width: calc(100% - 550px);
            height: 100%;
            background: #000;
            display: none;
            z-index: 999;
        }

    </style>

js:

    <script>
    function checkClick() {
        $('#side-menu').css('transform','translateX(0px)')
        $('.mark').css('display','block')
    }

    $('.mark').click(function () {
        $('#side-menu').css('transform','translateX(100%)')
        $('.mark').css('display','none')
    })
    </script>

效果：