<!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" lang="zh-CN">
<head>
<title>丁学-博客园-http://www.cnblogs.com/dxef</title>
<script>
function getPosition() {
var top = document.documentElement.scrollTop;
var left = document.documentElement.scrollLeft;
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
return {top:top,left:left,height:height,width:width};
}
function showPop(){
var width = 300; //弹出框的宽度
var height = 160; //弹出框的高度
var obj = document.getElementById("pop");
obj.style.display = "block";
obj.style.position = "absolute";
obj.style.zindex = "999";
obj.style.width = width + "px";
obj.style.height = height + "px";
var Position = getPosition();
leftadd = (Position.width-width)/2;
topadd = (Position.height-height)/2;
obj.style.top = (Position.top + topadd) + "px";
obj.style.left = (Position.left + leftadd) + "px";
window.onscroll = function (){
var Position = getPosition();
obj.style.top = (Position.top + topadd) +"px";
obj.style.left = (Position.left + leftadd) +"px";
};
}
function hidePop(){
document.getElementById("pop").style.display = "none";
}
</script>
</head>
<body>
<div id="pop" style="border:1px solid #CCC;display:none;">test<br /><a href="javascript:hidePop();">hide</a></div>
<hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/>
<a href="javascript:showPop()">show</a>
</body>
</html>
<html>
<body>
<div id="div_InputNum" style="position:absolute;display:none; border-style:solid;border-width:1px;left=100;top=50; background:#CCCCCC; ">
<input name="numInputNum1" type="text" style="border-style:solid;border-width:1px;" size="5">
<br>
<input type="text" name="numInputNum2" style="border-style:solid;border-width:1px;" size="5">
<input name="div1" type="hidden" /><input name="div2" type="hidden" />
<input type="button" name="btnChangeNum" value="确定"/ onclick="ChangeNum(div1.value,div2.value)">
</div>
<div id="div_num1">2</div>
<div id="div_num2">3</div>
<input type="button" name=btnChangeNum1 value="输入新值" onClick="DispDiv('div_num1','div_num2',this.offsetLeft,this.offsetTop)">
<div id="div_num3">4</div>
<div id="div_num4">5</div>
<input type="button" name=btnChangeNum2 value="输入新值" onClick="DispDiv('div_num3','div_num4',this.offsetLeft,this.offsetTop)">
<script language="javascript">
function ChangeNum(div1,div2){
document.getElementById("div_InputNum").style.display="none";
document.getElementById(div1).innerHTML=numInputNum1.value
document.getElementById(div2).innerHTML=numInputNum2.value
}
function DispDiv(div1,div2,PositionLeft,PositionTop){
document.getElementById("div_InputNum").style.display="block";
document.getElementById("div_InputNum").style.left=PositionLeft+80
document.getElementById("div_InputNum").style.top=PositionTop
numInputNum1.value=document.getElementById(div1).innerHTML
numInputNum2.value=document.getElementById(div2).innerHTML
document.getElementById("div1").value=div1
document.getElementById("div2").value=div2
}
</script>
</body>
<html>