欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery操作dom實現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)

 更新時間：2016年08月25日 14:02:53   作者：王小傘  
實現(xiàn)彈出遮罩層的方法有很多種，接下來本文給大家介紹通過jquery操作dom實現(xiàn)彈出頁面遮罩層以及web端和移動阻止遮罩層的滑動，對頁面彈出遮罩層的相關知識感興趣的朋友一起看看吧

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

彈出遮罩層

遮罩層彈出有非常多的方法，這里只寫出本人用的代碼，使用jq操作dom的方法進行實現(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的一個遮罩頁面，.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"
});

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

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

效果圖

遇到問題

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

解決方案PC端

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

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

解決方案移動端

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

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

相關文章

最新評論