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