本文实例讲述了jQuery实现的页面遮罩层功能。分享给大家供大家参考，具体如下：
');
//$(".loading-shade").css("height",htmlHeight+"px");
$(".loading-shade").css("100%");
}/*删除页面遮罩*/
function removeShade() {
$(".loading-shade").remove();
}
/*页面遮罩点击关闭弹出层
* dom=>#id
* type => hide || remove
* */
function closeDiv(dom, type) {
$(".loading-shade").click(function() {
type == "hide" ? $(dom).hide() : $(dom).remove();
$(".loading-shade").remove();
})
}
//需要调用的页面添加的js（这里是点击上边的div(即：.personsex p元素)的时候实现遮罩层消失。）
// $('#sexlog,#personsex').unbind("click").bind("click",function(){
// addShade();
// $('.personsex').show();
// });
//
// $('.personsex p').bind('click',function(){
// $('.loading-shade').remove();
// $('.personsex').hide();
// });
//======================================================================================
//需要调用的页面添加的js（这里是点击遮罩层实现遮罩层（即：.loading-shade）页面关闭）
$('#sexlog,#personsex').unbind("click").bind("click",function(){
addShade();
$('.personsex').show();
del();
});
function del(){
$('.loading-shade').bind('click',function(){
$('.loading-shade').remove();
$('.personsex').hide();
});
}
运行效果：
