弹窗之背景模糊效果

最新推荐文章于 2024-07-01 11:46:26 发布

FE小白

最新推荐文章于 2024-07-01 11:46:26 发布

阅读量6.3k

点赞数 2

分类专栏： CSS3 HTML 文章标签： filter css

本文链接：https://blog.csdn.net/a527749703/article/details/47421735

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS3

1 篇文章 0 订阅

订阅专栏

弹窗之背景模糊效果

最近要做一个弹层功能，根据设计，弹层只占据屏幕的一小部分，原页面充当底层背景时，需要有blur模糊效果。

css的滤镜使用的不多，在解决这个问题的过程中，我首先想到的是使用filter: blur(2px);实现模糊模糊效果：
1.定义浮层div，将position设为absolute，top、left设为0，并添加filter: blur(2px)的属性；
2.在浮层上定义弹出文案

打开浏览器，却发现整个浮层都变成模糊效果了。原来是由于filter的继承性，这样的方案实现不了自己想要的效果。

那么如何避免这种继承呢？那可以直接在body下，设置两个同级div，一个包含页面的主要内容，一个定义弹层。在弹层时，给第一个div添加blur效果。

效果如下：
正常页面：

blur效果：

blur

demo部分代码：
HTML：

<body>
    <section class="content">
        <div class="demo_line_01">我是分割线~~~~~</div>
        <a class="btn-blur">点我出现模糊遮罩层</a>
    </section>
    <section class="elastic-layer close">
        <div class="login-panel">
            <dl>
                <dd>
                    <label for="input_id">id:</label>
                    <input type="text" id="input_id">
                </dd>
                <dd>
                    <label for="input_id">number:</label>
                    <input type="number">
                </dd>
            </dl>
        </div>  
    </section>
</body>

css：

body{
    width: 100%;
    height: 100%;
}

.login-panel{
    width:400px;
    height:300px;
    background-color:#fff;
    border-radius:4px;
    margin:0 auto;
    top:50%;
    margin-top:-150px;
    position:relative;
}
.elastic-layer{
    background:rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    z-index:1000;
}
label{
    width:50px;
    display:inline-block;
    text-align:right;
}

input{
    display:inline-block;
    width:200px;
    height:30px;
    border-radius:4px;
    margin:0 auto;
    margin-top:10px;
}

.content{
    padding:5rem;
    text-align: center;
}

.close{
    display: none;
}

.blur{
    filter:blur(2px);
    -webkit-filter:blur(2px);
}

.btn-blur{
    cursor: pointer;
    background-color: #f63;
    padding:20px;
    display: block;
    text-align: center;
    border-radius: 4px;
    width: 60%;
    margin:0 auto;
}

.btn-blur:active{
    background-color: #f33;
}


.demo_line_01{
    padding: 0 20px 0;
    margin: 20px 0;
    line-height: 2px;
    border-left: 200px solid red;
    border-right: 200px solid red;
    text-align: center;
}

JS(主要实现点击按钮出弹层；点击弹层外部，弹层消失):

$(function(){
    $('.btn-blur').on('click',function(){
        $('.content').addClass('blur');
        $('.elastic-layer').removeClass('close');
        event.stopPropagation();
    });

    $(".login-panel").on('click',function(){
        event.stopPropagation();
    });

    $('body').on('click',function(){
        $('.content').removeClass('blur');
        $('.elastic-layer').addClass('close');
    });

});