弹窗之背景模糊效果

来源：互联网发布：linux vsftpd pid 太多编辑：程序博客网时间：2024/04/28 01:01

弹窗之背景模糊效果

最近要做一个弹层功能，根据设计，弹层只占据屏幕的一小部分，原页面充当底层背景时，需要有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');    });});

0 0