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

thinkblog

浏览: 90678 次

最近访客更多访客>>

chengpengvb

feixiongzaixian

tyong

xhgrid

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (88)

社区版块

存档分类

<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"> 
<div id="mydiv" style="border:1px solid #A2C5ED;position:absolute;display:block;background-color:red;height:100px;width:100px;">
	mydiv
</div> 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
<input type="button" onclick="show()" value="show"> 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
<input type="button" onclick="show()" value="show"> 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaa 
</BODY> 
</HTML>

分享到：