最近項(xiàng)目遇到了遮罩層的一些問題，總結(jié)一下：

彈出遮罩層

遮罩層彈出有非常多的方法，這里只寫出本人用的代碼，使用jq操作dom的方法進(jìn)行實(shí)現(xiàn)的。

<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="取 消" type="button" /><div class="clear"></div></div> </div>

#bg為透明度為0.6的一個(gè)遮罩頁面，.box為遮罩層上的按鈕。

//彈出遮罩$("#bg").css({display: "block", height: $(document).height()});var $box = $('.box');$box.css({//設(shè)置彈出層距離左邊的位置left: ($("body").width() - $box.width()) / 2 -5 + "px",//設(shè)置彈出層距離上面的位置top: ($(window).height() - $box.height()) + $(window).scrollTop() + "px",display: "block"});

有了觸發(fā)遮罩的行為后，設(shè)置遮罩的高度為整個(gè)頁面高度和可見性可見，然后對(duì)按鈕出現(xiàn)的位置進(jìn)行定位布局的設(shè)置，需要注意的是top屬性要加上滾輪的高度，這樣會(huì)保證我們的按鈕會(huì)一直在視線之內(nèi)。

關(guān)閉遮罩時(shí)也只需設(shè)置可見性即可。

效果圖

遇到問題

功能上是可以實(shí)現(xiàn)的，但還是有些缺陷問題，比如頁面過長時(shí)遮罩層也會(huì)隨著頁面進(jìn)行滑動(dòng)，按鈕的位置就會(huì)發(fā)生變化：

解決方案PC端

pc端的解決思路就是在彈出遮罩層的時(shí)候取消已經(jīng)存在的滾動(dòng)條，達(dá)到無法滾動(dòng)的效果。

也就是說給body添加overflow：hidden屬性即可，IE6、7下不會(huì)生效，需要給html增加overflow:hidden屬性。

解決方案移動(dòng)端

移動(dòng)端取消滾動(dòng)條是達(dá)不到效果的，這時(shí)就需要去除遮罩層和按鈕層的touchmove的默認(rèn)事件，代碼如下：

$('.box,#bg').bind("touchmove",function(e){e.preventDefault();});