Use jQuery to create a simple example of the effect of the mask layer pop-up, jquery is simple

Use jQuery to create a simple example of the effect of the mask layer pop-up, jquery is simple

The customer's website suddenly needs a masked pop-up window effect, which can also be called a dark box. The specific effect is that the background on the webpage becomes translucent, and a menu or something appears in the middle of the screen. This effect is very common on the Internet, for example, browsing the album in the QQ space. The advantage of this effect is that users can focus on the pop-up menu.

God said that there should be a Demo for articles with code, so there will be a Demo.

HTML Structure

First, analyze the process: trigger an event (for example, click a button), and a background mask contains a content layer. The trigger button is replaced by a div here, And the click event is used for demonstration. Then our HTML structure is very clear.

<Div class = "click"> click HERE </div> <div class = "click1"> enhanced version </div> <div class = "bg"> </div> <div class = "content"> here is the body content </div>

CSS code

CSS code for the masking effect is the most critical. The mask uses two divs. One is used as the background, and the other is the content display layer, which is usually centered.

.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}

For a brief explanation, you must first hide it and then use jQuery to trigger the display. Specify the position attribute as fixed. In this way, the top, left, bottom, right, and z-index attributes can be activated, you can set the width and height to 100% to overwrite the entire webpage. Generally, the attribute value of absolute is used to achieve this effect, because it has better compatibility. However, in practical applications, when the page is very long and scrolling down, the absolute mask layer will also follow the scroll. For the content layer, it is relatively simple to specify the width and height with a negative margin to center the display.
Note that the opacity of the background layer uses the opacity attribute, because this attribute can be better controlled by jQuery. However, fixed and opacity are not supported by earlier IE browsers.

JQuery code

Analyze the interaction operation of the mask. Click the pop-up button and then click the mask to disappear. Then you can directly perform operations on CSS.

 $(function(){  $(‘.click').click(function(){   $(‘.bg').css({‘display':'block'});   $(‘.content').css({‘display':'block'});  });  $(‘.bg').click(function(){   $(‘.bg').css({‘display':'none'});   $(‘.content').css({‘display':'none'});  }); });

The CSS method is directly used here. When you click it, the display attribute is changed. In addition, there are many implementation methods that will not be described in detail. Click "Click here" to see the effect.
More tips and Methods

More gentle display:

After clicking it, it is not a good way to suddenly appear. Therefore, I added another button and used the fadeIn and fadeOut methods to control the gradient.

 $(‘.click1').click(function(){ $(‘.bg').fadeIn(200); $(‘.content').fadeIn(400); }); $(‘.bg').click(function(){ $(‘.bg').fadeOut(800); $(‘.content').fadeOut(800); });

This simple method enhances the user experience. Of course, there are some more advanced effects that can be achieved.