您的位置：首页 > 其它

让DIV在弹出位置在屏幕中间

2011-09-06 10:03 375 查看 
<HTML>
<HEAD>
<TITLE> 当前位置 </TITLE>
<script>
function show(){
// 仅适用于IE,clientWidth,clientHeight,分别指宽度和高度,以px计
// scrollLeft.返回第一个匹配元素的水平滚动条位置
var screenWidth = document.body.clientWidth+document.body.scrollLeft;
var screenHeight = document.body.clientHeight;
var divObj = document.getElementById("mydiv");
// 返回元素的宽度和高度,以px计
var divWidth = divObj.offsetWidth;
var divHeight = divObj.offsetHeight;
// 这里是让div的位置位于当前屏幕的中间位置,这里的当前屏幕指的是不带滚动条的
var left = parseInt((screenWidth - divWidth)/2);
var top = parseInt((screenHeight - divHeight)/2);
// 带上滚动条的位置进行计算
divObj.style.left = left+document.body.scrollLeft;
// scrollTop 滚动条的垂直位置
divObj.style.top = top + document.body.scrollTop;
}
</script>
</HEAD>

<BODY>
<input type="button" onclick="show()" value="show"></br>
<div id="mydiv" style="border:1px solid #A2C5ED;position:absolute;display:block;background-color:red;height:100px;width:100px;">
mydiv
</div>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
<input type="button" onclick="show()" value="show"> </br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
<input type="button" onclick="show()" value="show"> </br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaa<br>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航