成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

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

彈出遮罩層

遮罩層彈出有非常多的方法，這里只寫出本人用的代碼，使用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();
});