请问一下，我想弹出一个div，但是此div需要显示在页面的正中央（无论滚动过几屏），请问该怎么计算top属性

请问一下，我想弹出一个div，但是此div需要显示在页面的正中央（无论滚动过几屏），请问该怎么计算top属性现在该div已经可以弹出了
left属性我已经用window.screen.width计算出来了
但是top属性，我该怎么计算，请帮助，谢谢。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="div绝对剧中.aspx.cs" Inherits="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">
<head runat="server">
    <title>div绝对居中</title>
    <style type="text/css">
/*居中层CSS，定位页面中央的一点*/
#center
{
  background:#ffffff;
  height:400px;
  width:300px;
  /*设置位置*/
  top:50%;
  left:50%;
  position:absolute;

  color:#ffcccc;
}
/*内容层CSS，根据中央的一点确定自己的位置*/
#content
{
  background:red;
  width:300px;
  height:200px;
  /*设置浮动，脱离居中层限制（菜单什么很有用哦）*/
  position:absolute;
  /*上右下左的边距，这里设置的2个值，第一个是高，第二个是宽，但都是这个DIV的宽高的一半*/
  margin:-100px 0 0 -150px;
  /*演示用*/
  color:#111111;
}
        /*以上两个从http://www.cccbbs.net/htm_data/36/0811/28798.html看到的，进行了一定的修正*/
        /*以上两个的合并，只要调用这一个CLASS就OK了*/
#test_center
{
  width: 340px;
  height: 140px;
  left: 50%; top:
  50%;
  margin-left:-170px;
  margin-top: -70px; position: absolute;
  background:#BBBBBB;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="center">
            <div id="content">
                sssssssssssss
            </div>
        </div>
    </form>
</body>
</html>
直接将下面代码保存成xxx.html，就是你要的效果！<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>原创：风干的果子</title>
<style type="text/css">

</style>
<script language="javascript" type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('popIframe').style.display='block';
document.getElementById('bg').style.display='block';
}function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
document.getElementById('popIframe').style.display='none';
}</script>
</head>
<body>
<div style="height:1400px; ">
春天的江潮水势浩荡，与大海连成一片，一轮明月从海上升起，好像与潮水一起涌出来。<br />
    月光照耀着春江，随着波浪闪耀千万里，什么地方的春江没有明亮的月光。<br />
    江水曲曲折折地绕着花草丛生的原野流淌，月光照射着开遍鲜花的树林好像细密的雪珠的闪烁。<br />
    月光象白霜一样从空中流下，感觉不到它的飞翔，它照得江畔的白沙看不见。<br />
    江水、天空成一色，没有些微灰尘，只有明亮的一轮孤
<div style="height:100px;  text-align:center;"> <a href="javascript:showDiv()">点我,弹出层</a></div>
</div><div id="popDiv" class="mydiv" style="display:none;">网页设计大本营欢迎你！<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div>
<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
</body>
</html>
<!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>
    <title>无标题页</title>
    <style type="text/css">
    img{border:0px;}
    .go-top{ width:25px; height:65px; position:absolute; right:30px;}
    .go-top a{ display:block; cursor:pointer; outline:none;}
    </style>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var topDistance = 200;
        var showDistance = 1;
        var gotopCon = "<div class='go-top'><a href='#'><img src='images/gotop.gif' /></a></div>"
        var thisTop = $(window).scrollTop() + topDistance;
        $("#container").css("position","relative");
        $("#container").append(gotopCon);
        $(".go-top").css("top",thisTop);

        var tid;
        function play(){
            thisTop = $(window).scrollTop();
            var top = parseInt($(".go-top").css("top"));
            if(thisTop+topDistance-top!=0){
                var dy = (thisTop+topDistance-top)*0.1;
                dy=Math.ceil(dy)
                $(".go-top").css("top",top+dy);
            }
        }
        setInterval(play,10);
        $("a",".go-top").click(function(){
            $("html").animate({scrollTop:0},"fast");//IE,FF
            $("body").animate({scrollTop:0},"fast");//Webkit
            return false;
        });
    });
    </script>
</head>
<body style="height:10000px;">
<div id="container"></div>
</body>
</html>