例如我有个div，先让他隐藏起来，然后我在页面中点击超链接，让这个DIV显示出来。现在的问题是，我有个页面很长，当我没有拉动滚动条时，点击某个超链接，让DIV显示并居中好办，但是当我拉动滚动条点击下面的超链接时，怎么样让这个DIV仍然出现在屏幕可视范围的中部。
其实我的意思就是无论你的页面有多长，只要你点击了让这个DIV显示的超链接，就始终让这个DIV显示在可视范围的中间位置
其实我的意思就是无论你的页面有多长，只要你点击了让这个DIV显示的超链接，就始终让这个DIV显示在可视范围的中间位置
这个方法只对IE有效啊，在火狐中怎么用啊？？？？
var docEle = function()
{
return document.getElementById(arguments[0]) || false;
} function openNewDiv(_id)
{
var m = "mask";
if (docEle(_id)) document.body.removeChild(docEle(_id));
if (docEle(m)) document.body.removeChild(docEle(m)); //mask遮罩层 var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
_scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth + "px";
newMask.style.height = _scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#33393C";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask); //新弹出层 var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDivWidth = 400;
newDivHeight = 200;
newDiv.style.width = newDivWidth + "px";
newDiv.style.height = newDivHeight + "px";
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = " ";
document.body.appendChild(newDiv); //弹出层滚动居中 function newDivCenter()
{
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
}
if(document.all)
{
window.attachEvent("onscroll",newDivCenter);
}
else
{
window.addEventListener('scroll',newDivCenter,false);
} //关闭新图层和mask遮罩层
var newA = document.createElement("div");
newA.innerHTML ="取消";
var newB = document.createElement("TEXTAREA");
newB.setAttribute("cols","40");
newB.setAttribute("rows","10");
newA.onclick = function(){
if(document.all)
{
window.detachEvent("onscroll",newDivCenter);
}
else
{
window.removeEventListener('scroll',newDivCenter,false);
}
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newB);
newDiv.appendChild(newA);
}
</script>
<body>
<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">弹出层</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br></body>申明:本代码来自csdn,非本人创作
<div style="height:1000px;"></div>
<div><input type="button" onclick="alert(document.documentElement.scrollTop)" value="show document.documentElement.scrollTop" />
<input type="button" onclick="alert(document.documentElement.scrollTop)" value="show document.body.scrollTop" />
</div>
IE 8: 385 385
FF 3.5: 398 398
<div style="top:50%;left:50% position:fixed;">这样你的DIV就会脱离文档流，以当前的浏览器窗口为参照来定位。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- delclare meta elements -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>JavaScript Syntax Highlighter</title>
<style type="text/css">
#layer {
position:absolute; width: 400px; height: 200px; background-color: red
}
</style>
</head>
<body>
<div id="layer" style="left: 0px; top:0px"></div>
<script type="text/javascript">
window.onload = window.onresize = window.onscroll = function() {
var doc = document,
layer = doc.getElementById('layer'),
clientWidth = window.innerWidth/*W3C*/|| doc.documentElement.clientWidth/*std IE*/||doc.body.clientWidth/*IE quirk mode*/,
clientHeight = window.innerHeight || doc.documentElement.clientHeight || doc.body.clientHeight;
layer.style.left = Math.round((clientWidth - layer.offsetWidth) / 2) + 'px';
layer.style.top = Math.round((clientHeight - layer.offsetHeight) / 2) + 'px';
};
</script>
</body>
</html>
.div{width:500px;height:400px; position:absolute;top:50%;left:50%;margin:-200px -250px;border:1px solid #ccc;}
var isRn=true;
//定位到目标层的元素
var layer=document.getElementById("centerLayer");
//浏览器宽度
var bWidth=document.documentElement.clientWidth;
//浏览器高度
var bHeight=document.documentElement.clientHeight;
//目标层的宽度
var lWidth=document.getElementById("centerLayer").offsetWidth;
//目标层的高度
var lHeight=document.getElementById("centerLayer").offsetHeight;
//实现效果
if(isRn){
layer.style.pixelLeft=(bWidth-lWidth)/2;
layer.style.pixelTop=(bHeight-lHeight)/2;
}}
我用document.onkeydown事件测试了下，有点小问题，就是上面代码中的浏览器高度包括了菜单栏标题栏工具栏的高度，你使用那个滚动条的高度代码替换下就可以了，至于代码是什么，我还不知道，不好意思,别的都没问题，你怎么样改变窗口都会居中的