彈出頁面遮罩層，以及web端和移動端阻止遮罩層的滑動。

　　最近項目遇到了遮罩層的一些問題，總結一下：

彈出遮罩層

遮罩層彈出有非常多的方法，這里只寫出本人用的代碼，使用jq操作dom的方法進行實現的。

<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的一個遮罩頁面，.box為遮罩層上的按鈕。

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

display: "block"
                    });

 

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

關閉遮罩時也只需設置可見性即可。

效果圖

遇到問題

功能上是可以實現的，但還是有些缺陷問題，比如頁面過長時遮罩層也會隨着頁面進行滑動，按鈕的位置就會發生變化：

解決方案PC端

pc端的解決思路就是在彈出遮罩層的時候取消已經存在的滾動條，達到無法滾動的效果。

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

解決方案移動端

移動端取消滾動條是達不到效果的，這時就需要去除遮罩層和按鈕層的touchmove的默認事件，代碼如下：

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