SoFunction
Updated on 2025-03-03

Clever talk about the issue of mask layer scroll bar

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>

        &lt;td width="65" bgcolor="#eeeeee"><sup>*</sup>User ID</td>
        &lt;td width="100" bgcolor="#fbfbfb"&gt;&lt;b&gt;{$member.MEMBER_NAME}&lt;/b&gt;&lt;/td&gt;

        &lt;td width="65" bgcolor="#eeeeee"><sup>*</sup>Real Name</td>
        &lt;td width="80" bgcolor="#fbfbfb"&gt;&lt;b&gt;{$}&lt;/b&gt;&lt;/td&gt;

        &lt;td width="60" bgcolor="#eeeeee">Gender</td>
        &lt;td bgcolor="#fbfbfb"&gt;&lt;b&gt;&lt;php&gt;echo $gender[$info['GENDER']];&lt;/php&gt;&lt;/b&gt;&lt;/td&gt;

       &lt;/tr&gt;

       &lt;tr&gt;

        &lt;td bgcolor="#eeeeee"><sup>*</sup>Mobile Number</td>
        &lt;td bgcolor="#fbfbfb"&gt;&lt;b&gt;{$}&lt;/b&gt;&lt;/td&gt;

        &lt;td bgcolor="#eeeeee">Email</td>
        &lt;td colspan="3" bgcolor="#fbfbfb"&gt;&lt;b&gt;{$}&lt;/b&gt;&lt;/td&gt;

       &lt;/tr&gt;

       &lt;tr&gt;

        &lt;td colspan="2" bgcolor="#eeeeee"><sup>*</sup>Valid ID (ID card)</td>
        &lt;td colspan="4" bgcolor="#fbfbfb"&gt;&lt;b&gt;{$}&lt;/b&gt;&lt;/td&gt;

       &lt;/tr&gt;

       &lt;tr&gt;

        &lt;td bgcolor="#eeeeee">Mailing address</td>
        &lt;td colspan="3" bgcolor="#fbfbfb"&gt;&lt;b&gt;{$}&lt;/b&gt;&lt;/td&gt;

        &lt;td bgcolor="#eeeeee">Zip Code</td>
        &lt;td bgcolor="#fbfbfb"&gt;&lt;b&gt;{$}&lt;/b&gt;&lt;/td&gt;

       &lt;/tr&gt;

      &lt;/table&gt;

&lt;/div&gt; 




&lt;/div&gt; 

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.