<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><styletype="text/css">body{ font-family:Arial,Helvetica,sans-serif; font-size:12px; margin:0; } #main{ height:1800px; padding-top:90px; text-align:center; } #fullbg{ background-color:Gray; left:0px; opacity:0.5; position:absolute; top:0px; z-index:3; filter:alpha(opacity=50);/*IE6*/ -moz-opacity:0.5;/*Mozilla*/ -khtml-opacity:0.5;/*Safari*/ } #dialog{ background-color:#FFF; border:1pxsolid#888; display:none; height:200px; left:50%; margin:-100px00-100px; padding:12px; position:fixed!important;/*浮动对话框*/ position:absolute; top:50%; width:200px; z-index:5; }#dialogp{margin:0012px; } #dialogp.close{ text-align:right; } </style><body><divid="main"><ahref="#"onclick="showBg();">点击这里看jQuery遮罩层效果.</a> </div><!--jQuery遮罩层--><divid="fullbg"></div><!--endjQuery遮罩层--><!--对话框--><divid="dialog"><pclass="close"><ahref="#"onclick="closeBg();">关闭</a></p><p>正在加载，请稍后...</p> </div> <!--jQuery遮罩层上方的对话框--> </body></html><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><scripttype="text/javascript">//显示灰色jQuery遮罩层 functionshowBg(){ varbh=$("body").height(); varbw=$("body").width(); $("#fullbg").css({ height:bh, width:bw, display:"block" }); $("#dialog").show(); } //关闭灰色jQuery遮罩 functioncloseBg(){ $("#fullbg,#dialog").hide(); } </script> <!--[iflteIE6]><scripttype="text/javascript">//浮动对话框 $(document).ready(function(){ vardomThis=$('#dialog')[0]; varwh=$(window).height()/2; $("body").css({ "background-p_w_picpath":"url(about:blank)", "background-p_w_upload":"fixed" }); domThis.style.setExpression('top','eval((document.documentElement).scrollTop+'+wh+')+"px"'); }); </script><![endif]-->