**

弹窗之背景模糊效果

**

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

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

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

那么如何避免这种继承呢?那可以直接在body下,设置两个同级div,一个包含页面的主要内容,一个定义弹层。在弹层时,给第一个div添加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'); }); });

技术
©2019-2020 Toolsou All rights reserved,
【贪心算法】哈夫曼编码问题VHDL——JK触发器react 项目--博客系统数据库期末复习:综合应用题汇总面过了,起薪30k找出游戏的获胜者(java)JAVA实验四集合与函数式编程实验排序会了递归,不学非递归太可惜了SQL综合题 员工单位综合题数据库作业五