用DIV模拟弹出窗口－－窗体滚动跟随
<!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>72色-http://www.72color.com/</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>
- 相关文章:
修复IE背景图片闪烁或不见的现象 (2008-4-3 14:46:19)
理解JavaScript中的事件 (2008-3-25 13:45:58)
想成为css高手吗-----那就来看看高手是怎么写的把 (2008-3-20 15:59:13)
真正解决FLASH边框线（完美去掉） (2008-3-13 15:50:38)
一个js非常简明的教程 (2008-3-13 12:43:12)
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 (2008-3-12 9:24:41)
js最大化动态载入IFrame (2008-3-12 9:15:14)
58项---经典的JS及ASP代码收藏 (2008-3-6 8:53:19)
时下很流行的div弹出效果 (2008-3-3 12:29:30)
符合web标准插入Flash的方法 (2008-2-29 16:59:47)
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。