遮罩层

效果描述：点击后出现遮罩层的效果。

html代码：

<div id="black_overlay" style="display:none"></div>

            <div id="cover" style="display:none">

                <div id="copy-text">

                    <p id="a1">复制淘口令成功</p>

                    <p id="a2">打开“手机淘宝”即可查看购买</p>

                    <input type="button" id="ok" value="确定">

                </div>

 </div>

js代码：

$("#ok").on('click',function(){     //点击确定按钮后遮罩层消失

        $("#black_overlay").css('display','none')

        $("#cover").css('display','none')

})

css代码：

/* 遮盖层 */

#black_overlay{

    position: fixed;

    z-index: 1000;  //指定一个元素的堆叠顺序

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    filter: alpha(opacity=80);  //这个是为IE6设的，可取值在0-100，其它三个0到1

    opacity: 0.8;                    // 这是最重要的，因为它是CSS标准.该属性支持firefox, Safari和 Opera

    overflow: hidden;

    background: #ccc;

}

#cover{

    display: flex;

    flex-direction: column;

    align-items: center;

    position: absolute;

    z-index: 1002;

    margin: auto;

    margin: 0.45rem;

    top: 0.8rem;

}

#copy-text{

    height: 2.03rem;

    width: 2.83rem;

    background-color: #fff;

    font-size: 0.16rem;

    font-weight: bold;

    display: flex;         //flex布局，实现全局居中

    flex-direction: column;

    align-items: center;

    border-radius: 0.05rem;

}