A minimalist example sharing _jquery using jquery to make masking-layer pop-up effects

The customer's website suddenly needs a matte window effect, also can be called a black box, and so on, the effect is that the background of the page becomes translucent, and then in the middle of the screen appear a menu and things like that. This effect is very common on the Internet, such as: QQ Space browsing albums. The benefit of this effect is that you can focus your users on the pop-up menu.

God said, there are code articles, there should be a demo, so there is a demo.

HTML structure

First, let's analyze the process: triggering an event (such as clicking a button), and then a background mask with a layer of content. The trigger button, I'm here to use DIV instead, and use click event to demonstrate. Then our HTML structure is very clear.

 <div class= "Click" > click here </div>
 <div class= "Click1" > Effect-enhanced </div>
 <div class= "BG" ></div>
 <div class= "Content" > here is the text </div>

CSS Code

CSS code for masking effects is the most critical. The mask uses two Div, one as the background, to cover the entire page, 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;}

To explain briefly, first hide, then use JQuery to trigger the display. The Position property is then specified as fixed, because the top, left, bottom, right, z-index these properties can be activated, and the width, height 100% is set to cover the entire Web page. Typically, the absolute property value is generally used to achieve this effect because it is better compatible. But in practical applications, when the page is very long and scrolling down, using the absolute mask layer will also follow the scrolling. For the content layer, it is simpler to specify the width and height with the negative margin to center it.
In particular, it is important to note that the semi-transparent background layer uses the Opacity attribute because it is better to control with JQuery. But fixed, opacity are not supported by earlier IE browsers.

JQuery Code

Analysis of the mask of the interactive operation, nothing more than click on the pop-up, and then click on the mask, disappear. Then directly to the CSS operation can be.

 $ (function () {
  $ ('. click '). Click (function () {
   $ ('. BG '). CSS ({' Display ': ' Block '});
   $ ('. Content '). css ({' Display ': ' Block '});
  };
  $ ('. BG '). Click (function () {
   $ ('. BG '). CSS ({' Display ': ' None '});
   $ ('. Content '). css ({' Display ': ' None '});
  });
 

Here directly using CSS method, when clicked to change display properties, in addition there are many ways to implement, no longer repeat. To do this, when we click "Click here", we can see the effect.
more tips and methods

More Gentle display:

After clicking, the sudden appearance is not a good way. So I added a button, click after the FadeIn, fadeout method to control fade.

 $ ('. Click1 '). Click (function () {
 $ ('. BG '). FadeIn;
 $ ('. Content '); FadeIn ();
 });
 $ ('. BG '). Click (function () {
 $ ('. BG '). fadeout (a);
 $ ('. Content '); fadeout (a);
 });

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