The problem I encountered today is that the mask layer behind the pop-up layer has a scroll bar, so there is no mask layer in the invisible area under the scroll bar. The solution is to add css.
js code
<script type="text/javascript"> //Display gray JS mask layer function showBg(ct,content){ var bH=$(document).height(); var bW=$("body").width()+16; var objWH=getObjWh(ct); $("#fullbg").css({width:bW,height:bH,display:"block"}); var tbT=("|")[0]+"px"; var tbL=("|")[1]+"px"; $("#dialog").show(); $("#"+ct).css({top:tbT,left:tbL,display:"block"}); $(window).scroll(function(){resetBg()}); $(window).resize(function(){resetBg()}); } function getObjWh(obj){ var st=;//The distance of the scroll bar to the top var sl=;//The distance from the left of the scroll bar var ch=;//The height of the screen var cw=;//The width of the screen var objH=$("#"+obj).height();//Height of the floating object var objW=$("#"+obj).width();//Width of the floating object var objT=Number(st)+(Number(ch)-Number(objH))/2; var objL=Number(sl)+(Number(cw)-Number(objW))/2; return objT+"|"+objL; } function resetBg(){ var fullbg=$("#fullbg").css("display"); if(fullbg=="block"){ var bH2=$("body").height(); var bW2=$("body").width()+16; $("#fullbg").css({width:bW2,height:bH2}); var objV=getObjWh("dialog"); var tbT=("|")[0]+"px"; var tbL=("|")[1]+"px"; $("#dialog").css({top:tbT,left:tbL}); } } //Close the gray JS mask layer and operation window function closeBg(){ $("#fullbg").css("display","none"); $("#dialog").css("display","none"); } </script>
css code
#fullbg{ background-color: Gray; display:none; z-index:3; left:0px; opacity:0.5; top:0; left:0;height:100%; width:100%; z-index:999; position:fixed; _position:absolute; _left: expression_r( + - ); _top: expression_r( + - ); filter:Alpha(Opacity=30); opacity: 0.3; } #dialog { width:560px; background:#eee; display: none; z-index: 5; padding:16px; font-size:12px; z-index:1000; position:absolute; } #dialog sup{ color:#f00;} #dialog .close0{ position:relative; top:-24px; left:544px; height:38px; width:40px;}
html code
<div ></div> <!-- end JSMask layer --> <!-- Dialog Box --> <div > <div class="close0"><a href="#" onclick="closeBg();"><img src="__IMG__/" /></a></div> <div > <h3>personal information</h3> <p>(Remark:The following information is only used to send you relevant service materials as needed,Will not leak secrets,Please understand)</p> <table width="555" border="0" cellspacing="1" cellpadding="0" class="yh_table"> <tr> <td width="65" bgcolor="#eeeeee"><sup>*</sup>User ID</td> <td width="100" bgcolor="#fbfbfb"><b>{$member.MEMBER_NAME}</b></td> <td width="65" bgcolor="#eeeeee"><sup>*</sup>Real Name</td> <td width="80" bgcolor="#fbfbfb"><b>{$}</b></td> <td width="60" bgcolor="#eeeeee">Gender</td> <td bgcolor="#fbfbfb"><b><php>echo $gender[$info['GENDER']];</php></b></td> </tr> <tr> <td bgcolor="#eeeeee"><sup>*</sup>Mobile Number</td> <td bgcolor="#fbfbfb"><b>{$}</b></td> <td bgcolor="#eeeeee">Email</td> <td colspan="3" bgcolor="#fbfbfb"><b>{$}</b></td> </tr> <tr> <td colspan="2" bgcolor="#eeeeee"><sup>*</sup>Valid ID (ID card)</td> <td colspan="4" bgcolor="#fbfbfb"><b>{$}</b></td> </tr> <tr> <td bgcolor="#eeeeee">Mailing address</td> <td colspan="3" bgcolor="#fbfbfb"><b>{$}</b></td> <td bgcolor="#eeeeee">Zip Code</td> <td bgcolor="#fbfbfb"><b>{$}</b></td> </tr> </table> </div> </div>
Calm down and proceed step by step.
The above article is a cliché about the issue of the mask layer scroll bar. The editor shares all the content with you. I hope you can give you a reference and I hope you can support me more.