弹框和遮罩层的写法

你还没有提交信息哦~

这份月饼您不要了吗?

css:原理就是最大的盒子是遮罩层,然后给他fixed定位,并让他占满全屏,背景用rgba;弹框的话就是给相对定位,因为里面的图片文字都是绝对定位,弹框的背景图可以用图片来展示。

.cover{
    background:#000;
    background: rgba(0,0,0,0.5);
    filter: alpha(opacity=50);/**这个是为IE6设的,可取值在0-100***/
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    color: #fff;
    display: none;
}
.cover-box{
    width: 80%;
    position: relative;
    top:35%;
    left: 10%;
    text-align: center;
}
.cover-bg{
    display: block;
    width: 100%;
    max-width: 480px;
    margin:0 auto;
}
.cover-title{
    width: 100%;
    max-width: 480px;
    font-size:1.9rem;
    position: absolute;
    top:42%;
    height: 2rem;
    line-height: 2rem;
}

.cover-text{
    width: 100%;
    max-width: 480px;
    position: absolute;
    top:57%;
    line-height: 1.8;
    font-size:1.4rem;
}

js

   $('.cover').on('click', function () {
            $('.cover').stop().hide();
      })//这个是点击遮罩层就关闭

你可能感兴趣的:(弹框和遮罩层的写法)