Background blur effect of pop-up window


We're going to do a shell layer function recently , According to the design , The layer occupies only a small part of the screen , When the original page acts as the underlying background , There needs to be blur Blur effect .

css We don't use a lot of filters , In the process of solving this problem , My first thought was to use filter: blur(2px); Realize the fuzzy effect :
1. Defining floating layers div, take position Set to absolute,top,left Set to 0, And add filter: blur(2px) Properties of ;
2. Define pop-up copy on floating layer

Open browser , It turns out that the whole floating layer has become blurred . It turned out to be due to filter The inheritance of , Such a scheme can not achieve the desired effect .

So how to avoid this kind of inheritance ? That can be done directly in the body lower , Set two siblings div, One contains the main content of the page , A defining shell layer . In the shell layer , To the first one div add to blur effect .

The effect is as follows :
Normal page :

blur effect :

demo Partial code :
<body> <section class="content"> <div class="demo_line_01"> I am the dividing line ~~~~~</div> <a
class="btn-blur"> Point me to the blur mask layer </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>
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( The main realization is to click the button to eject the bullet layer ; Click outside the shell layer , The shell disappears ):
$(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,
about String How to create objects JavaScript Hundred refining into Immortals 1.15 Legendary Is MCU embedded , It's a cliche Resume the 13th session python Blue Bridge Cup html+css+js Make a simple website home page java Connect to the database to realize basic addition, deletion, modification and query VHDL——JK trigger Java of JDBC programming 3 4j It's not legal python expression _3+4j It's not legal Python expression .【linux】shell: ordinary shell Script exercise