div 弹窗 始终居中

网页有竖向滚动条，没有横向的。如何让div弹窗始终居中，不论如何滚动？

解决方案 »

  1.   

    好像滚动滚动条的时候有事件触发的.等回家查一下看看.
    如果有,控制div位置的代码写在里面就可以 .
      

  2.   

    position:fixed;
    响应Google号召，此方法不支持IE6:)
      

  3.   

    <style type="text/css">
    <!--
    html,body {height:100%; margin:0px; font-size:12px;}.mydiv {
    background-color: #f9fff6;
    border: 1px solid #009900;
    text-align: center;
    line-height: 25px;
    font-size: 13px;
    font-weight: bold;
    z-index:99;
    width: 300px;
    height: 50px;
    left:50%;/*FF IE7*/
    top:50%;/*FF IE7*/margin-left:-150px!important;/*FF IE7 half of its width */
    margin-top:-60px!important;/*FF IE7 half of its height*/margin-top:0px;
    position:fixed!important;/*FF IE7*/
    position:absolute;/*IE6*/_top:       expression(eval(document.compatMode &&
                document.compatMode=='CSS1Compat') ?
                documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
                document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/}
    --> 
    </style>
    <script language="javascript" type="text/javascript">
    function showDiv(){document.getElementById('popDiv').style.display='block';}
    window.onload=function(){
        showDiv();
    }
    </script>
    <!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>始终在中间DIV (支持IE FF)</title></head><body>
    <div id="popDiv" class="mydiv" style="display:none;">始终在中间<br/>
    </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/>
    <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/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    </body>
    </html>
      

  4.   

    原理如下：获取当前屏幕的宽高，然后让js操作你说需要操作的蹭，一直等于当前页面坐标+偏移坐标就OK
      

  5.   

    弹窗居中.看你上面的代码有几个点需要修改
    1.如果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    有DOC声明 你的document.body都应该改成document.documentElement
    2.在window.onresize的时候需要修正位置. 不然但你改变窗口大小 位置就错位了.所以楼主的居中判断其实可以用别的办法.当然用现在这个就需要修正resize