遮罩层

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

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;

}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,833评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,739评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,456评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,133评论 0 2
  • 从小就对吃东西有着一种特别的执念,从喜欢吃甜的,喜欢吃辣的,到喜欢吃精致的,喜欢吃特别的。对于吃的追求,2...
    越涯阅读 655评论 2 3

友情链接更多精彩内容