今天發一個之前寫的移動端的項目，主要是講一下遮罩層的應用，以及順帶提一下移動開發的一些事情。首先按鈕點擊彈出遮罩層這個大家很熟悉了，這里還是給大家提供一份代碼，跟通用的沒太大區別，主要講一下方法：

$(function(){

var jiage=$(".jiage"),xingji=$(".xingji"),fj=$(".fj li"),qd=$(".qd");
jiage.click(function(){
tanchu();
xingji.slideDown(260);

});
function tanchu(){
var w=document.createElement("div");
w.setAttribute("id", "mybody"); //創建透明背景層(mybody)
with (w.style) {
width='100%';
height='100%'
position = 'absolute';
zIndex = '10';
left = '0';
top = '0';
background = '#000000';
filter = 'Alpha(opacity=50)';
opacity = '0.3';
}
document.body.appendChild(w);
}

fj.click(function(){
fj.css("background","#fff").css("box-shadow","0").css("color","#000");
$(this).css("background","#F4F4F4").css("box-shadow","0px 1px 0px #999 inset").css("color","#31A1A4");

});

//點擊之后清楚遮罩層
qd.click(function(){
xingji.slideUp(300);
var m=$("#mybody");
m.remove();
});
});

遮罩層的代碼沒什么好說，jq的基本dom操作，當然，有需要的可以自取，也很容易看懂。另外值得一提的是遮罩層的彈窗都要注意銷毀，而這里因為正好頁面處有確定選項，所以通過點擊確定之后清楚遮罩層。當然這里提一個在移動端如何做上拉框的做法。我用的是將上拉框先用絕對定位fixed，然后點擊的時候下拉，因為本身jq的slideUp采取的就是將div由0變大，因此這樣的做法便能實現我們想要的效果。附上圖片：

這里想提一下，該項目是之前在小公司做的外包項目，初步只實現了效果，而用戶體驗事實上卻是很差，瀏覽器采取和客戶端一樣的效果明顯有很大缺陷，反應較慢。當然，從某種程度上，調試也是可以提升一部分效果的。

轉載于:https://www.cnblogs.com/qianyongV/p/3972575.html

總結

以上是生活随笔為你收集整理的js遮罩层以及移动端的上拉框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。