遮罩层的有关问题？
日期：2014-05-17 浏览次数：20976 次
遮罩层的问题？？
//为什么我做的遮罩层每次在第一次进去的时候只能屏幕的左半边，但是刷新后，就可以遮全部了。
//jsp代码
<!--遮罩层-->
<div class="cover" id="coverdiv1" style="display:none"></div>
<!--显示层-->
<div class="login" id="coverdiv2" style="display:none">
<div id="close"><a href="javascript: showdiv()">[关闭]</a></div>
<form action="loginUser.action" method="post">
<table width="381" height="95" id="zhe">
<tr>
<td height="53">用户名:<input type="text" name="name">
<a href="register.jsp">注册账号?</a></td>
</tr>
<tr>
<td height="34">密 码:<input type="password" name="pwd" size="21">
<a href="forgetpwd.jsp">忘记密码?</a></td>
</tr>
<tr>
<td>
<input type="submit" value="登录" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</div>
//js代码
<!--遮罩层-->
var cover1,cover2;
function chu()
{
cover1 = document.getElementById("coverdiv1");
cover2 = document.getElementById("coverdiv2");
cover1.style.width=document.documentElement.scrollWidth+"px";
cover1.style.height=document.documentElement.scrollHeight+"1px";
cover2.style.left="400px";
cover2.style.top="150px";
}
function showdiv()
{
cover1.style.display="none";
cover2.style.display="none";
}
function hidediv()
{
cover1.style.display="block";
cover2.style.display="block";
}
//css样式
/*遮罩层*/
.cover{
background-color:gray;
position:absolute;
top:0px;
left:0px;
filter:alpha(opacity=90);
opacity:0.9 !important;
z-index:5;
}
.login{
position:absolute;
border:1px solid gray;
width:400px;
height:250px;
background-color:#FFFFFF;
z-index:2000;
}
.login a{
text-decoration:none;
}
.login a:visited {
color:blue;
}
.login a:hover{
color:#FF9900;
text-decoration:underline;
}
input{
border:1px solid #CCDCFE;
font-size:13px;
color:#000000;
}
#zhe{
text-align:center;
}
#close{
float:right;
}
#close a{
font-weight:900;
color:red;
}
------解决方案--------------------
你调用 chu() 函数的时间点是啥时候？
有可能其还没有完成屏幕的渲染，所以所获取的 documentElement.scrollWidth 不准，考虑：
<body onload="window.setTimeout('chu()', 500);" >
------解决方案--------------------
在页面加载的时候就调用，并且设定时间
//为什么我做的遮罩层每次在第一次进去的时候只能屏幕的左半边，但是刷新后，就可以遮全部了。
//jsp代码
<!--遮罩层-->
<div class="cover" id="coverdiv1" style="display:none"></div>
<!--显示层-->
<div class="login" id="coverdiv2" style="display:none">
<div id="close"><a href="javascript: showdiv()">[关闭]</a></div>
<form action="loginUser.action" method="post">
<table width="381" height="95" id="zhe">
<tr>
<td height="53">用户名:<input type="text" name="name">
<a href="register.jsp">注册账号?</a></td>
</tr>
<tr>
<td height="34">密 码:<input type="password" name="pwd" size="21">
<a href="forgetpwd.jsp">忘记密码?</a></td>
</tr>
<tr>
<td>
<input type="submit" value="登录" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</div>
//js代码
<!--遮罩层-->
var cover1,cover2;
function chu()
{
cover1 = document.getElementById("coverdiv1");
cover2 = document.getElementById("coverdiv2");
cover1.style.width=document.documentElement.scrollWidth+"px";
cover1.style.height=document.documentElement.scrollHeight+"1px";
cover2.style.left="400px";
cover2.style.top="150px";
}
function showdiv()
{
cover1.style.display="none";
cover2.style.display="none";
}
function hidediv()
{
cover1.style.display="block";
cover2.style.display="block";
}
//css样式
/*遮罩层*/
.cover{
background-color:gray;
position:absolute;
top:0px;
left:0px;
filter:alpha(opacity=90);
opacity:0.9 !important;
z-index:5;
}
.login{
position:absolute;
border:1px solid gray;
width:400px;
height:250px;
background-color:#FFFFFF;
z-index:2000;
}
.login a{
text-decoration:none;
}
.login a:visited {
color:blue;
}
.login a:hover{
color:#FF9900;
text-decoration:underline;
}
input{
border:1px solid #CCDCFE;
font-size:13px;
color:#000000;
}
#zhe{
text-align:center;
}
#close{
float:right;
}
#close a{
font-weight:900;
color:red;
}
------解决方案--------------------
你调用 chu() 函数的时间点是啥时候？
有可能其还没有完成屏幕的渲染，所以所获取的 documentElement.scrollWidth 不准，考虑：
<body onload="window.setTimeout('chu()', 500);" >
------解决方案--------------------
在页面加载的时候就调用，并且设定时间
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
