老生常谈遮罩层 滚动条的问题

<script type="text/javascript"> 

//显示灰色JS遮罩层 

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=objWH.split("|")[0]+"px"; 

var tbL=objWH.split("|")[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=document.documentElement.scrollTop;//滚动条距顶部的距离 

var sl=document.documentElement.scrollLeft;//滚动条距左边的距离 

var ch=document.documentElement.clientHeight;//屏幕的高度 

var cw=document.documentElement.clientWidth;//屏幕的宽度 

var objH=$("#"+obj).height();//浮动对象的高度 

var objW=$("#"+obj).width();//浮动对象的宽度




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=objV.split("|")[0]+"px"; 

var tbL=objV.split("|")[1]+"px"; 

$("#dialog").css({top:tbT,left:tbL}); 

} 

} 




//关闭灰色JS遮罩层和操作窗口

function closeBg(){ 

$("#fullbg").css("display","none"); 

$("#dialog").css("display","none");

} 




</script>

#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(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); _top: expression_r(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);

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;}

<div id="fullbg"></div> 

<!-- end JS遮罩层 --> 

<!-- 对话框 --> 

<div id="dialog">

<div class="close0"><a href="#" onclick="closeBg();"><img src="/UploadFiles/2021-04-02/close.png">

静下心来，循序渐进。


以上这篇老生常谈遮罩层 滚动条的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。