js弹出层随浏览器大小始终居中的问题

<styletype="text/css">body{margin:0;padding:0}#div1{position:absolute;width:200px;hei... <style type="text/css">
body{ margin:0; padding:0}
#div1{ position:absolute; width:200px; height:200px; background:#ff0000; display:none; z-index:1000}
#masklayer{
background:#000;
display:none;
filter:alpha(opacity = 50);
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);
}
</style>
<script type="text/javascript">
window.onload = window.onresize = window.onscroll= function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
var oMask = document.getElementById('masklayer');
oBtn.onclick = function(ev){
oMask.style.display = "block";
oDiv.style.display = "block";
var oEvent = ev || event;
oDiv.style.top = (document.documentElement.clientHeight - oDiv.clientHeight)/2 + "px";
oDiv.style.left = (document.documentElement.clientWidth - oDiv.clientWidth)/2 + "px";
}
}
</script>
</head>

<div id="masklayer"></div>
<div id="div1"></div>
<input type="button" id="btn" value="弹出窗口"/>

这是我写的代码，浏览器大小变化后，弹出层就不居中了，本人是菜鸟，求高手解决一下啊展开

 我来答

2个回答

#热议# 应届生在签三方时要注意什么？

琳玲港货
2013-02-01 · TA获得超过454个赞

知道答主

回答量：89

采纳率：0%

帮助的人：36.4万

我也去答题访问个人页

关注

展开全部

注意吧<scritp></script>部分的代码放到body的最后边，帮你加了个html、head标签，onlcick不要放在方法体内部，因为你只需要绑定点击事件一次就够了，不要重复绑定。document.documentElement.clientHeight不兼容ie，ie要用document.body.clientHeight

<html>
<head>
<style type="text/css">
body{ margin:0; padding:0;}
#div1{ position:absolute; width:200px; height:200px; background:#ff0000; display:none; z-index:1000}
#masklayer{
background:#000;
display:none;
filter:alpha(opacity = 50);
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);
}
</style>

</head>
<body>
<div id="masklayer"></div>
<div id="div1"></div>
<input type="button" id="btn" value="弹出窗口"/>
<script type="text/javascript">

var oDiv = document.getElementById('div1');
var oMask = document.getElementById('masklayer');
var oBtn = document.getElementById('btn');
window.onload = window.onresize= function(){
oDiv.style.top = (document.documentElement.clientHeight - oDiv.clientHeight)/2 + "px";
oDiv.style.left = (document.documentElement.clientWidth - oDiv.clientWidth)/2 + "px";
}
oBtn.onclick = function(ev){
oMask.style.display = "block";
oDiv.style.display = "block";
var oEvent = ev || window.event;
}
</script>
</body>
<html>

追问

这样的话第一次点击，弹出层就不居中了...囧

本回答由网友推荐

已赞过 已踩过<

评论收起

百度网友838cd85
2013-11-06

知道答主

回答量：2

采纳率：0%

帮助的人：2600

我也去答题访问个人页

关注

展开全部

<div class="info_user" style="display: block;">
<div class="info_cont">
<div class="close"></div>
<a class="have_look" href="http://huodong.jumei.com/activity_1111jihe.html"></a>
</div>
</div>
.info_user{
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background:rgba(0,0,0,0.8);
}
.info_user_ie6{
_position: absolute;
_top:expression(offsetParent.scrollTop);
_height:expression(offsetParent.clientHeight);
}
.info_user .info_cont{width: 388px; height: 238px; background: #fff;top: 30%;left: 40%;position: absolute; border-radius: 5px; background: url("/images/luckybox/lucky_boxlaokehu/dialog.jpg") no-repeat; }
.info_cont .close{position: absolute; top: 1px; right: 5px; cursor: pointer; height: 15px;width: 15px;}

.info_user_ie6{
_top:expression(offsetParent.scrollTop);
_height:expression(offsetParent.clientHeight);
}
//防止ie7下的问题，为ie6调用特有的css
if(isIE6){
$(".info_user").addClass("info_user_ie6");
}
ie6下使用js调用，就可以避免这个问题

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js弹出层随浏览器大小始终居中的问题

其他类似问题

为你推荐：