最近项目遇到了掩膜层的一些问题。总而言之：

弹出掩膜层

有很多方法可以弹出蒙版图层。这里我只写自己的代码，用jq操作dom。

style . box { position : absolute；宽度：100%；左侧：50%；height:autoz指数：100；背景-color : # F5 F5 F5；border:1px #ddd固体；padding:1px}/style div id=' BG ' v-click=' closeMask()'/div div Class=' box ' style=' display : none ' input v-click=' closeMask()Class=' inpt _ bottom bw white ' value=' cancel ' type=' button '/div Class=' clear '/div/div # BG是一个透明度为0.6的掩码页面，并且。框是遮罩层上的一个按钮。

//弹出掩码$ ('# bg ')。CSS ({display:' block '，height: $(文档)。height()})；var $box=$('。方框’)；$box.css({//将位置设置为left :($(“body”)。width ()-$ box.width ())/2-5' px '，//将位置设置为top3360 ($ (window)。height ()-$ box)在弹出层上方触发蒙版后，将蒙版的高度设置为整个页面的高度和可见性，然后为按钮出现的位置设置定位布局。需要注意的是，顶部属性应该加上滚轮的高度，这样可以保证我们的按钮始终在视线范围内。

您只需要在关闭遮罩时设置可见性。

翻译

遇到问题

功能上可以实现，但还是有一些缺陷。例如，当页面太长时，遮罩层会随着页面一起滑动，按钮的位置也会改变：

解决方案的电脑端

pc的解决方案是在遮罩层弹出时取消现有的滚动条，从而达到不滚动的效果。

也就是说，可以给body添加overflow:hidden属性，但是在IE6和ie7下不会生效，所以需要给html添加overflow:hidden属性。

解决方案移动端

取消移动端的滚动条达不到效果，需要去掉蒙版层和按钮层的默认touchmove事件。代码如下：

$('.方框，#bg ')。bind('touchmove '，函数(e){ e . preventdefault()；});