Jquery实现遮罩层的方法
本文实例讲述了Jquery实现遮罩层的方法。分享给大家供大家参考。具体如下：
1、假设#main为页面body中的最外层Div标签
2、背景被遮罩后，显示的弹出窗（默认是不显示的，所包含的CSS这里就不贴了）：
<!--StatusBarStart--> <divid="warning-dialog"class="statuswarningcenter-topno-display"> <pclass="closestatus"><ahref="javascript:$().hideWarningDialog()"title="Close">x</a></p> <divclass="clear"></div> <p><imgsrc="images/icon_warning.png"alt="Warning"/><spanid="warning-dialog-detail">Attention!</span></p> <divclass="closes"> <inputtype="hidden"id="refresh-after-warning"value="false"/> <inputname=""type="image"src="images/niu_qd.jpg"align="absmiddle"class="button_jl"onclick="javascript:$().hideWarningDialog()"/> </div> </div> <!--StatusBarEnd-->
3、在script.js中定义遮罩函数以及弹出窗操作函数，当然script.js，jquery.js需要包含在html页面中：
varwarning_dialog=$('#warning-dialog'),
warning_dialog_detail=$('#warning-dialog-detail'),
refresh_after_warning=$('#refresh-after-warning');
//显示遮罩层
$.fn.showWarningDialog=function(detail,refresh){
if($isIE6){
$(".menu_select").hide();
}
$.fn.mask();
warning_dialog_detail.html(detail);
refresh_after_warning.val(refresh);
warning_dialog.css({
"position":"absolute",
"left":"50%",
"top":"50%",
"margin-left":"-250px",
"margin-top":"-100px",
"border":"solid3px#ccc",
"z-index":6000
});
warning_dialog.show();
}
//去除遮罩层
$.fn.hideWarningDialog=function(){
if($isIE6){
$(".menu_select").show();
}
$.fn.unmask();
if(refresh_after_warning.val()=="true"){
$('#main').showLoading();
location.reload(true);
}else
warning_dialog.hide();
}
//显示遮罩效果
$.fn.mask=function(){
this.unmask();
//参数
varop={
bgcolor:'#ccc',
z:5100,
opacity:0.3
};
varposition={
top:0,
left:0
};
varoriginal=$("#main");
//创建一个Mask层，追加到对象中
varmaskDiv=$('<divclass="maskdivgen"> </div>');
maskDiv.appendTo(original);
varmaskWidth=original.width();
varmaskHeight=original.height();
maskDiv.css({
position:'absolute',
top:position.top,
left:position.left,
'z-index':op.z,
width:maskWidth,
height:maskHeight,
'background-color':op.bgcolor,
opacity:0
});
maskDiv.fadeIn('fast',function(){
//淡入淡出效果
$(this).fadeTo('fast',op.opacity);
});
returnmaskDiv;
}
//去除遮罩效果
$.fn.unmask=function(){
varoriginal=$("#main");
if(this[0]&&this[0]!==window.document){
original=$(this[0]);
}
original.find(">div.maskdivgen").fadeOut('fast',0,function(){
$(this).remove();
});
}
本例中使用main标签获得高度，宽度，如果不想通过标签获得页面高度和宽度，可通过如下方式获得
/*当前页面高度*/
functionpageHeight(){
returndocument.body.scrollHeight;
}
/*当前页面宽度*/
functionpageWidth(){
returndocument.body.scrollWidth;
}
4、调用遮罩层：
<scripttype="text/javascript">
functioninit(){
<?php
if($msg!="用户名输入错误"){
?>
$.fn.showWarningDialog("<?phpecho$msg;?>","false");
<?php
}
?>
}
window.onload=function(){
init();
};
</script>
希望本文所述对大家的jQuery程序设计有所帮助。