用DIV模拟弹出窗口－－窗体滚动跟随－－丁学

复制以下代码直接写到记事本里保存成html文件即可看到效果 IE6、IE7、FF2兼容，其他浏览器未测试 
<!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/dingxue</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>
丁学－－博客园－－http://www.cnblogs.com/dingxue
<div id="pop" style="border:1px solid #CCC;display:none;">test<br><a href="javascript:hidePop();" mce_href="javascript:hidePop();">hide</a></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript:showPop()" mce_href="javascript:showPop()">show</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
posted @   丁学  阅读(5996)  评论(10)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
SQL AI 助手