jQuery操作dom實現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
最近項目遇到了遮罩層的一些問題，總結(jié)一下：
彈出遮罩層
遮罩層彈出有非常多的方法，這里只寫出本人用的代碼，使用jq操作dom的方法進(jìn)行實現(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({
//設(shè)置彈出層距離左邊的位置
left: ($("body").width() - $box.width()) / 2 -5 + "px",
//設(shè)置彈出層距離上面的位置
top: ($(window).height() - $box.height()) + $(window).scrollTop() + "px",
display: "block"
});
有了觸發(fā)遮罩的行為后，設(shè)置遮罩的高度為整個頁面高度和可見性可見，然后對按鈕出現(xiàn)的位置進(jìn)行定位布局的設(shè)置，需要注意的是top屬性要加上滾輪的高度，這樣會保證我們的按鈕會一直在視線之內(nèi)。
關(guān)閉遮罩時也只需設(shè)置可見性即可。
效果圖
遇到問題
功能上是可以實現(xiàn)的，但還是有些缺陷問題，比如頁面過長時遮罩層也會隨著頁面進(jìn)行滑動，按鈕的位置就會發(fā)生變化：
解決方案PC端
pc端的解決思路就是在彈出遮罩層的時候取消已經(jīng)存在的滾動條，達(dá)到無法滾動的效果。
也就是說給body添加overflow：hidden屬性即可，IE6、7下不會生效，需要給html增加overflow:hidden屬性。
解決方案移動端
移動端取消滾動條是達(dá)不到效果的，這時就需要去除遮罩層和按鈕層的touchmove的默認(rèn)事件，代碼如下：
$('.box,#bg').bind("touchmove",function(e){
e.preventDefault();
});
相關(guān)文章
jQuery快速上手：寫jQuery與直接寫JS的區(qū)別詳細(xì)解析
jQuery代碼具體的寫法和原生的Javascript寫法在執(zhí)行常見操作時的區(qū)別如下所示。需要的朋友可以過來參考下2013-08-08
基于jQuery實現(xiàn)點(diǎn)擊最后一行實現(xiàn)行自增效果的表格
現(xiàn)在任何事務(wù)都追求效率和人性化，當(dāng)然網(wǎng)頁效果也是如此，如果一個可以編輯數(shù)據(jù)的表格，編輯到最后一行的時候，點(diǎn)擊可以自動添加一行，這樣算是一個比較人性化的效果，可以免去一絲勞頓之苦，下面分享一段這樣的代碼2016-01-01
操作下拉列表框的jquery代碼，方便學(xué)習(xí)jquery的朋友。2010-02-02
jQuery 獲取和設(shè)置select下拉框的值實現(xiàn)代碼
jQuery獲取和設(shè)置select下拉框值的實現(xiàn)代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
并不是所有的瀏覽器都暴露了dom的對象原型,所以不能通過簡單擴(kuò)展原型方法并通過return this的形式來實現(xiàn)跨瀏覽器的鏈?zhǔn)秸{(diào)用,jquery采用了包裝器的方式來解決了這個問題。2010-12-12
用Jquery去操作HTML元素很方便，能夠靈活自如的去查找。其實CSS也可以靈活方便的去查找篩選，以下用到的一些，整理了一下，還有很多有趣的用法，后續(xù)會繼續(xù)添加。2011-07-07
jQuery獲取父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)的代碼
這篇文章主要介紹了jQuery獲取父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)的代碼,需要的朋友可以參考下2023-06-06
在項目中，我們經(jīng)常要遇到上傳圖片，這就需要我們必須要驗證圖片的格式與大小，那么如何來操作呢，今天就給大家分享一個非常簡單的jQuery驗證上傳圖片的格式與大小的代碼。2014-12-12
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
淺談jquery.form.js的ajaxSubmit和ajaxForm的使用
下面小編就為大家?guī)硪黄獪\談jquery.form.js的ajaxSubmit和ajaxForm的使用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09