Jquery translucent mask effect Summary

The road from academic science is getting farther and farther away recently !!

What we want to summarize today is to implement a translucent mask effect. Click a button on the page to immediately display a part in the center of the screen, and the area outside the part is covered with a translucent mask. Click the mask area. The central part disappears and the page is restored to its original shape.

First, let's talk about the simplest implementation method. Prepare two divs. One is the canvas <div class = "bg"> </div>, the other is the widget <div class = "content"> </div> to be displayed in the center of the screen. You can define what to display in the content. It can be an image, a chart, or a video. Then add the effect to make it work.

1. Now that you have clicked the button to hide the original webpage, set the display priority for the two divs: z-index, set content to 3, and bg to 2.

2. If the image is translucent, add a color to the bg mask: background: #000.

3 At the beginning, they were hidden: display: none. after an event is triggered, it is displayed. This requires the jquery statement: $ ('. bg '). fadeIn (200 );$ ('. Content'). fadeIn (400 );

Well, it's almost the same. It's very simple. The complete code is as follows:

Click here and the body of the webpage is blablabla. Welcome to Sina Weibo! Believe in music, believe in May

This kind of original ecosystem implementation is easier. Some plug-ins can provide similar functions. Such as fancybox: http://fancybox.net/

The demo in fancybox is very nice. After all, it is professional. If you are interested, please take a look. The interface is also very simple. I learned it in just a few minutes.

If you want to pop up a dialog box, you can try jQuery UI: http://jqueryui.com/dialog/. There are several forms of dialog box above.

There are also some plug-ins, such as pop easy and thick box. But if you want to use plug-ins, it will be troublesome. Some plug-ins are charged, so you will be given a trial period of several days. Some plug-ins cannot be said when they will not be updated, which will affect the compatibility of your web pages. So, I 'd better use my first recommendation method.