今天发一个之前写的移动端的项目，主要是讲一下遮罩层的应用，以及顺带提一下移动开发的一些事情。首先按钮点击弹出遮罩层这个大家很熟悉了，这里还是给大家提供一份代码，跟通用的没太大区别，主要讲一下方法：

$(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变大，因此这样的做法便能实现我们想要的效果。附上图片：

这里想提一下，该项目是之前在小公司做的外包项目，初步只实现了效果，而用户体验事实上却是很差，浏览器采取和客户端一样的效果明显有很大缺陷，反应较慢。当然，从某种程度上，调试也是可以提升一部分效果的。