使用jQuery怎么实现一个遮罩层-创新互联
使用jQuery怎么实现一个遮罩层？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
在张家川回族自治等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供做网站、
网站建设 网站设计制作按需开发网站,公司网站建设,企业网站建设,
品牌网站制作,
全网整合营销推广,外贸网站建设,张家川回族自治网站建设费用合理。
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;
}
