Custom pop-up layer center and show mask, center mask

Custom pop-up layer center and show mask, center mask

1. Define two divs first. One is used to display the content of the pop-up layer, the other is used to set the color of the mask layer, and the other is used to display the button of the pop-up layer.

2. set css styles for the two divs respectively. The masked styles mainly include position: fixed; z-index: 2; background-color: #000; opacity: 0.7; top: 0; left: 0; width: 100%; height: 100%; display: none;

The pop-up layer displays the following content: postion: fixed; display: none; top: 50%; left: 50%; z-index: 3; background-color: # fff

3. write js in $ (function (){...}); write the button's click event in the page loading event, then directly $ ("# content "). fadeIn (200); $ ("# bg "). fadeIn (200); displays the pop-up layer and mask

Click the mask to hide the layer and the mask at any position as follows: $ ("# content"). fadeOut (200); $ ("# bg"). fadeOut (200 );