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

Source: Internet
Author: User
Tags visibility

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 ();
});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.