使用jQuery怎么实现一个遮罩层
使用jQuery怎么实现一个遮罩层？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
洋县网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。成都创新互联从2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。
1.样式如下设置：
CSS代码：
.mask {
position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
display:none;
}
其中： opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。
2.指定层的高度、和宽度。
js代码
//兼容火狐、IE8
//显示遮罩层
function showMask(){
$("#mask").css("height",$(document).height());
$("#mask").css("width",$(document).width());
$("#mask").show();
}
//隐藏遮罩层
function hideMask(){
$("#mask").hide();
}
3.在
中加入如下代码，然后就可以看效果了：
html代码
点我显示遮罩层4.使用方法：
在ajax提交表单后，加上showMask方法，数据返回后，加上hideMask()
需要的亲们可以根据自己需求，在遮罩层上面加一些提示信息
可以使用在线HTML/CSS/JavaScript前端代码调试运行工具http://tools.jb51.net/code/WebCodeRun测试运行上述代码效果（不要忘记加入jQuery.js文件）。
或者可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试运行如下完整代码（为方便测试效果，代码做了部分改进）：
www.jb51.net jQuery遮罩层
.mask {
position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 1; left: 0px;
opacity:0.5; -moz-opacity:0.5;
display:none;
}
.msg {
width: 300px;
height: 200px;
color: #3c763d;
background-color: #dff0d8;
border-radius: 4px;
padding: 15px;
position: absolute;
top: 0;
text-align: center;
margin: 0 auto;
z-index: 999;
left: 50%;
margin-left: -150px;
display:none;
}
