页面会产生横、竖滚动条的情况下,应该如何处理弹出层的定位?
但是我把以下的代码中处理部分,放到我的JS文件中,没有达到相应的效果,请问该如何解决?top = eval(document.compatMode && document.compatMode == 'CSS1Compat') ?
document.documentElement.scrollTop + (document.documentElement.clientHeight - document.body.offsetHeight)/2 + "px" : /*IE6*/
document.body.scrollTop + (document.body.clientHeight - document.body.clientHeight)/2;/*IE5 IE5.5*/
以上是新改的
top = document.body.scrollHeight > (initialheight + 300) ? (initialheight + 200) + "px":"10px";
以上是原来的
因为原来的是在页面没滚动条的情况下的,不支持有滚动条的页面如下有一段代码是别人处理页面有横、竖滚动条的情况<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<style type="text/css">
/*弹出层的STYLE*/
html,body {height:100%; margin:0px; font-size:12px;}.mydiv {
background-color: #ff6;
border: 1px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/margin-top:0px;position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/}
.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/}
/*The END*/</style>
<script type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}</script>
</head><body><div id="popDiv" class="mydiv" style="display:none;">恭喜你!<br/>你的成绩为:60分<br/>
<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div><div style="padding-top: 20px;">
<input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />
<input type="Submit" name="" value="显示层1" onclick="javascript:showDiv()" />
</div>
</body>
</html>
但是我把以下的代码中处理部分,放到我的JS文件中,没有达到相应的效果,请问该如何解决?top = eval(document.compatMode && document.compatMode == 'CSS1Compat') ?
document.documentElement.scrollTop + (document.documentElement.clientHeight - document.body.offsetHeight)/2 + "px" : /*IE6*/
document.body.scrollTop + (document.body.clientHeight - document.body.clientHeight)/2;/*IE5 IE5.5*/
以上是新改的
top = document.body.scrollHeight > (initialheight + 300) ? (initialheight + 200) + "px":"10px";
以上是原来的
因为原来的是在页面没滚动条的情况下的,不支持有滚动条的页面如下有一段代码是别人处理页面有横、竖滚动条的情况<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<style type="text/css">
/*弹出层的STYLE*/
html,body {height:100%; margin:0px; font-size:12px;}.mydiv {
background-color: #ff6;
border: 1px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/margin-top:0px;position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/}
.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/}
/*The END*/</style>
<script type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}</script>
</head><body><div id="popDiv" class="mydiv" style="display:none;">恭喜你!<br/>你的成绩为:60分<br/>
<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div><div style="padding-top: 20px;">
<input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />
<input type="Submit" name="" value="显示层1" onclick="javascript:showDiv()" />
</div>
</body>
</html>
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>CSS Position Fixed for IE6</title>
<style>
* html,* html body {background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top {position:absolute;bottom:auto; top:expression(eval(document.documentElement.scrollTop +(document.documentElement.clientHeight-this.offsetHeight)/2 ));}
* html .fixed-right {position:absolute;right:0px;left:auto;}
* html .fixed-bottom {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
.fixed-bottom {
position:fixed;
left:0px;
bottom:20px;
background:aqua;
width:200px;
height:200px;
}
.fixed-right{
position:fixed;
right:0px;
left:auto;
top:200px;
top:expression(eval(document.documentElement.scrollTop +(document.documentElement.clientHeight-this.offsetHeight)/2 ));
background:red;
width:200px;
height:200px;
}
.fixed-top{
position:fixed;
top:0px;
left:0px;
background:blue;
width:200px;
height:200px;
}
</style> </head>
<body>
<div style='height:2000px;width:500px;margin:10px auto; border:1px solid red;'></div>
<div class="fixed-top"></div>
<div class="fixed-bottom"></div>
<div class="fixed-right"></div>
</body>
</html>