Mobile end mask layer, content size change dynamic size

Implementation of Mask Layer

. mask{    Position:absolute;    top:0;    right:0;    bottom:0;    left:0;    Background-color:rgba (0,0,0,.3);    z-index:1000;
Display:none;}

Explanation: If you want to set the mask layer in a certain area, put the. Mask under a div in a certain area, set the width height according to your own needs, and correct the localization.

Level is set according to their own needs size;

I encountered the situation is the data is not fixed, the mask layer size is not fixed;

The mask layer normally masks when there is more data, and if there is no data or less data, the mask layer is not displayed in the lower part.

Mask layer can not set a fixed width, depending on how much data, because this is the mobile side, the tab bar is not fixed, will scroll with the page;

Solution:

Using JS dynamic control mask layer complex box size;

$ (". tab"). Click (function () {    if ("body"). Height () <$ (window). Height ()) {       $ ("body"). CSS ("height", $ ( window). Height ());    } else{          $ ("body"). CSS ("height", "Auto");     }   )       

Because the data is dynamically loaded, judge to put in the click inside to judge, otherwise get the height of the body is not accurate;

The above content is only for personal summary, if there are errors please indicate;

Mobile end mask layer, content size change dynamic size