jquery Operation Dom implements pop-up page mask layer (Web end and mobile end block sliding of mask layer) _jquery

Recent projects have encountered some of the mask layer problems, summed up:

Pop mask Layer

Mask layer Pop-up There are a lot of methods, here only write my code, using the JQ operation Dom method to implement.

<style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color: #f5f5f5; border:1px #ddd solid;padding:1px;} </style><div id= "bg" v-click= "Closemask ()" ></div>
<div class= "box" style= "Display:none" >
<input v-click= "Closemask ()" class= "Inpt_bottomb White" value= "Cancel" type= "button"/> <div class=
"Clear" ></div>
</div> 
</div>

#bg为透明度为0.6, a Mask page,. Box is a button on the mask layer.

Pop-up Mask
$ ("#bg"). CSS ({
display: "Block", Height: $ (document). Height ()
});
var $box = $ ('. box ');
$box. css ({
//Set pop-up layer distance to the left
: ($ ("body"). Width ()-$box. Width ())/2-5 + "px"///
set the pop-up layer from top position above
: ( $ (window). Height ()-$box. Height ()) + $ (window). scrolltop () + "px",
display: "Block"
});

With the behavior of triggering the mask, set the height of the mask to be visible for the entire page height and visibility, and then position the layout settings for the location where the button appears, and note that the top attribute should be added to the height of the wheel, which will ensure that our button is always in sight.

You can only set visibility when you close the mask.

Effect chart

Encounter problems

Functional is achievable, but there are some flaws, such as the page is too long when the mask layer will also slide with the page, the position of the button will be changed:

Solution PC Side

The solution of the PC side is to cancel the existing scroll bar when the mask layer is ejected to achieve the effect of not scrolling.

That is to add overflow:hidden properties to the body, IE6, 7 will not take effect, you need to add Overflow:hidden attributes to HTML.

Solution Mobile End

Moving the end of the scroll bar can not achieve the effect, then need to remove the mask Layer and button layer of the Touchmove default event, the code is as follows:

$ ('. box, #bg '). Bind ("Touchmove", function (e) {
e.preventdefault ();
});