手写一个弹出窗

需求：

    1、点击按钮能显示弹窗，并显示相对应的内容

    2、弹窗显示的时候有遮罩层，并且不能穿透

    3、关闭弹窗的同时去掉遮罩层，并且可以滑动列表内容

环境：

    vue + jQuery

代码：

<!-- 遮罩层 -->
<div id="mask" style="position:fixed; left:0; top:0; opacity:.5; width:100%; height:100%; background:#000; z-index:9; display: none;"></div>
<!-- 弹窗 -->
<div id="shadow" style="width: 80%; background-color: white; position: fixed; top: 40%; z-index: 10; left: 9%; box-shadow: 0 5px 15px rgba(245,245,245,.5); padding: 1%; border-radius: 8px; display: none;"> 
    <p>使用说明：</p>
    <div style="text-indent:2em; margin-bottom: 5%;">
        <p>1、{{UseTokenType}}</p>
        <p v-if="message">2、{{message}}</p>
    </div>
    <span @click="close" style="margin:0 auto; color:red; position: relative; left: 45%;">关闭</span>
</div>

function Description (option){  // 点击按钮显示弹窗
    $("#shadow").css({'display':'block'})  // 显示弹窗
    $('#mask').css({'display':'block'})  // 显示遮罩层
    $('html').add('body').add('#app').add('#divInfoList').css({'overflow':'hidden'})  // 打开弹窗之后不允许滑动列表（可以省略，在mask的div里面已经实现了）
}

// 关闭弹窗
function close(){
    $("#shadow").css({'display':'none'})  // 关闭弹窗
    $('#mask').css({'display':'none'})  // 关闭遮罩层
    $('html').add('body').add('#app').add('#divInfoList').css({'overflow':'auto'})  // 关闭弹窗后可以滑动列表（可以省略，在mask的div里面已经实现了）
}

#mark{
    position:fixed;
    left:0;
    top:0;
    opacity:.5;
    width:100%;
    height:100%;
    background:#000;
    z-index:998;
    // pointer-events: none; //允许操作，去掉这一行则不允许操作
    display:none;  // 默认不显示
}