遮罩层,滚动条问题

今天遇到的问题是,在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层,解决方式是加的css。

1
<strong><span>js代码</span></strong>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<script type=”text/javascript”>

//显示灰色JS遮罩层

function showBg(ct,content){

/*document.body.style.overflow = “hidden”;*/

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

/*$(“#”+content).html(“<div style=’text-align:center’>正在加载,请稍后…</div>”);*/

$(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”);

/*document.body.style.overflow = “scroll” */

}



</script>

</script>css代码

#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(documentElement.scrollLeft + documentElement.clientWidth – this.offsetWidth); _top: expression(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;}

 

html代码

<div id=”fullbg”></div> 

<!– end JS遮罩层 –> 

<!– 对话框 –> 

<div id=”dialog”>

<div class=”close0″><a href=”#” onclick=”closeBg();”><img src=”__IMG__/close.png” /></a></div>  

<div id=”dialog_content”>

<h3>个人信息</h3>

<p>(备注:以下信息我们只用于根据需要给您发送相关服务材料,不会对外泄密,敬请理解)</p>

<table width=”555″ border=”0″ cellspacing=”1″ cellpadding=”0″ class=”yh_table”>

              <tr>

                <td width=”65″ bgcolor=”#eeeeee”><sup>*</sup>用户ID</td>

                <td width=”100″ bgcolor=”#fbfbfb”><b>{$member.MEMBER_NAME}</b></td>

                <td width=”65″ bgcolor=”#eeeeee”><sup>*</sup>真实姓名</td>

                <td width=”80″ bgcolor=”#fbfbfb”><b>{$info.NAMES}</b></td>

                <td width=”60″ bgcolor=”#eeeeee”>性别</td>

                <td bgcolor=”#fbfbfb”><b><php>echo $gender[$info[‘GENDER’]];</php></b></td>

              </tr>

              <tr>

                <td bgcolor=”#eeeeee”><sup>*</sup>手机号码</td>

                <td bgcolor=”#fbfbfb”><b>{$info.TELEPHONE}</b></td>

                <td bgcolor=”#eeeeee”>电子邮箱</td>

                <td colspan=”3″ bgcolor=”#fbfbfb”><b>{$member.EMAIL}</b></td>

              </tr>

              <tr>

                <td colspan=”2″ bgcolor=”#eeeeee”><sup>*</sup>有效证件(身份证)</td>

                <td colspan=”4″ bgcolor=”#fbfbfb”><b>{$info.IDS}</b></td>

              </tr>

              <tr>

                <td bgcolor=”#eeeeee”>通讯地址</td>

                <td colspan=”3″ bgcolor=”#fbfbfb”><b>{$info.ADDRESS}</b></td>

                <td bgcolor=”#eeeeee”>邮编</td>

                <td bgcolor=”#fbfbfb”><b>{$info.ZIPS}</b></td>

              </tr>

            </table>

</div> 

 

</div> 

 

静下心来,循序渐进。

发表评论

电子邮件地址不会被公开。