How to create cool pop-up effects with JS and CSS3

This article will share with you a cool pop-up window effect made using js and css3. The entire background is blurred, which is much better than solid color and transparency. Friends who are interested in the js pop-up effect, let’s learn together

When I was watching TV at home yesterday, I found a pop-up effect when I exited. The entire background was blurred. I thought this effect was very cool, and it was more transparent than a solid color. There are so many high-end features. I tried several interfaces in succession and finally determined that the effect is 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 of all, recall the implementation of pop-up windows. Generally, we are divided into two layers, the pop-up window layer (popus) and the mask layer (mask). Normally I It is customary to set all these two elements to fixed positioning. The specific difference between them and absolute will be known once you try them. 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. Known size The pop-up window, as shown below, is 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 set it as above, 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 through the translate attribute To set, the offset value percentage is relative to its own width and height, so in principle it is the same as the first writing method, but it is more convenient to use.

Let’s get back 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 in webkit browsers Check out

Is 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 vivid. The complete code of this case is as follows:

<p class=&#39;bg&#39;>
 <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/009/7aa8214ef730e52d2e48f11dd8eafbb7-1.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;bg.jpg&#39; / alt="How to create cool pop-up effects with JS and CSS3" >
</p>
<p class=&#39;popus&#39;>
 效果是不是要好过纯色加透明呢
 <p>
 <p class=&#39;left btn &#39;>确实不错</p>
 <p class=&#39;right btn&#39;>也就那样</p>
 </p>
</p>

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 p{width:220px;margin:10px auto}
.popus p.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus p.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 , but the corresponding events are not disabled. 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, it will naturally not The underlying event will be triggered.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

js and css3 to achieve the rotation effect

JS and Canves to achieve the water ripple effect of click buttons

Javascript implements waterfall flow to dynamically load images

The above is the detailed content of How to create cool pop-up effects with JS and CSS3. For more information, please follow other related articles on the PHP Chinese website!