Jquery实现遮罩层的方法

本文实例讲述了Jquery实现遮罩层的方法。分享给大家供大家参考。具体如下：
1、假设#main为页面body中的最外层Div标签
2、背景被遮罩后，显示的弹出窗（默认是不显示的，所包含的CSS这里就不贴了）：

<！-- Status Bar Start --><div id="warning-dialog" class="status warning center-top no-display"> <p class="closestatus"><a href="javascript:$（）.hideWarningDialog（）" title="Close">x</a></p> <div class="clear"></div> <p><img src="images/icon_warning.png" alt="Warning" /><span id="warning-dialog-detail">Attention！</span></p> <div class="closes"><input type="hidden" id="refresh-after-warning" value="false" /><input name="" type="image" src="images/niu_qd.jpg" align="absmiddle" class="button_jl" onclick="javascript:$（）.hideWarningDialog（）" /> </div></div><！-- Status Bar End -->

3、在script.js中定义遮罩函数以及弹出窗操作函数，当然script.js，jquery.js需要包含在html页面中：

var warning_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" : "solid 3px #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）; } elsewarning_dialog.hide（）;}// 显示遮罩效果$.fn.mask = function（） { this.unmask（）; // 参数 var op = {bgcolor : "#ccc",z : 5100,opacity : 0.3 }; var position = {top : 0,left : 0 }; var original = $（"#main"）; // 创建一个 Mask 层，追加到对象中 var maskDiv = $（"<div class="maskdivgen"> </div>"）; maskDiv.appendTo（original）; var maskWidth = original.width（）; var maskHeight = 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）; }）; return maskDiv;}// 去除遮罩效果$.fn.unmask = function（） { var original = $（"#main"）; if （this[0] && this[0] ！== window.document） {original = $（this[0]）; } original.find（"> div.maskdivgen"）.fadeOut（"fast", 0, function（） {$（this）.remove（）; }）;}

本例中使用main标签获得高度，宽度，如果不想通过标签获得页面高度和宽度，可通过如下方式获得

/* 当前页面高度 */ function pageHeight（） {return document.body.scrollHeight; } /* 当前页面宽度 */ function pageWidth（） {return document.body.scrollWidth; }

4、调用遮罩层：

<script type="text/javascript"> function init（） {<?php if （$msg ！= "用户名输入错误"） {?> $.fn.showWarningDialog（"<?php echo $msg; ?>", "false"）;<?php }?>} window.onload = function（）{init（）; }; </script>

希望本文所述对大家的jQuery程序设计有所帮助。