您的位置：首页 > Web前端 > JavaScript

JavaScript 用DIV模拟弹出窗口并跟随窗体滚动

2009-03-23 18:52 716 查看 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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">
<head runat="server">
<title>无标题页</title>
<mce:script type="text/javascript"><!--
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";
}
// --></mce:script>

</head>
<body>
<div id="pop" style="border:1px solid #CCC;display:none;" mce_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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航