Create cool pop-up effects with JS+CSS3

When I was watching TV at home yesterday, I noticed a pop-up effect when I exited. The entire background was blurred. I thought this effect was very cool and much better than solid color and transparency. I tried several interfaces in succession and finally determined that the effect was achieved by css. , so I came to the company early this morning and quickly searched. Although the compatibility is extremely poor, it can be done with just one CSS attribute. I instantly felt that I knew so little~~

First, let’s recall the implementation of pop-up windows. Generally, we are divided into two layers, pop-up window layer (popus) and mask layer (mask). Normally, I am used to these two layers. All elements are set to fixed positioning. The specific difference between it and absolute will be known once you try it. We don’t need much for the mask layer. We set its properties as follows to let it cover the entire screen.

.mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:0.6;filter:alpha(opacity=60)}

The popus layer is a little more troublesome. Here we have two implementation methods

1. Pop-up windows of known size, as follows, are mainly implemented through top, left and negative margin.

.popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000}

2. If the size of the pop-up window is unknown, obtain the width and height of the pop-up window layer through js, and then perform the above settings, which will not be described here.

3. When css3 is supported, we do not need to know the width and height of the pop-up window, we can set it as follows

.popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}

Mainly set through the translate attribute, the offset value percentage is relative to itself Width and height, so in principle it is the same as the first writing method, but it is more convenient to use.

                                                                                                                                                                                        Back to the topic, let’s return to the topic, which is to let the elements achieve the Gaussian blur effect in PS.

This leads to a css attribute: filter. Note that the filter here is not the filter in IE. Filter has many values. If you are interested, you can click here. The author talks about it in great detail. We will only talk about one of the blurs today. First, look at the preview below

PS: Currently, this attribute only supports webkit browsers, so we use the css3 attribute directly, and the effect also needs to be viewed in webkit browsers

Isn’t it amazing? The code that works is this line - webkit-filter:blur(8px). The pixel value behind represents the degree of blur. Of course, in daily projects, we can also add some animations to make the page more blurry. vivid, the complete code of this case is as follows:

<div class=&#39;bg&#39;>
 <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/352/549/557/1481089828563681.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;bg.jpg&#39; / alt="Create cool pop-up effects with JS+CSS3" >
</div>
<div class=&#39;popus&#39;>
 效果是不是要好过纯色加透明呢
 <div>
 <div class=&#39;left btn &#39;>确实不错</div>
 <div class=&#39;right btn&#39;>也就那样</div>
 </div>
</div>

css:

*{padding:0px;margin:0px}
img{width:100%;margin:0px auto;display:block}
.bg.blur{-webkit-filter:blur(8px)}
.popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅黑";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.6);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none}
.popus div{width:220px;margin:10px auto}
.popus div.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus div.btn.right{float:right;color:#666}

js:

$('.bg').on('click',function(){
 console.log(98)
 $(this).addClass('blur');
 $('.popus').show();
})
$('.btn').on('click',function(){
 $('.bg').removeClass('blur');
 $('.popus').hide();
})

Is this the end? Obviously not, look at the console

When we pop up the window, we must disable the click events of our other layers, but we found that although we have blurred the other layers, we have not disable the corresponding events Of course, the solution is also very simple. We can add a mask layer without a background color and cover it on the page. In this way, every time we click on the mask layer, the underlying event will not be triggered.