js浮动窗口居中显示！求高手帮忙看下代码哪里错了！

绑定onresize,参考:http://bbs.csdn.net/topics/390687367

解决方案 »

  1.   

    #select{
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
    background:#aaa;
    }如果你只是想要居中，没有必要去计算,利用绝对定位，定位你要居中的那个元素就行了。
      

  2.   

    点击登录看效果
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    body { margin: 0; height: 2000px; }
    p{margin:0;}
    #mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.3; filter:alpha(opacity:30); display:none; }
    #box { width: 300px; height: 300px; position: fixed; _position: absolute; left: 0; top: 0; background: #fff; border: 5px solid #333; display:none;}
    #box p{height:40px;line-height:40px;background:#ccc;}
    #box p a{float:right;width:32px;height:32px;background:url(img/close.png);margin:4px 0;}
    #login{position:fixed;_position:absolute;padding:0 20px;font-size:16px;text-decoration:none;border:solid 1px #ccc;background:#03F;color:#fff;height:30px;line-height:30px;}
    #login:hover{background:#09F;color:red;}
    </style>
    <script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
    <!--[if IE 6]>
    <script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
    <script type="text/javascript">
    DD_belatedPNG.fix('#box a');
    </script>
    <![endif]--></head>
    <body>
    <a href="javascript:;" id="login">登录</a>
    <div id="mask"></div>
    <div id="box">
    <p><a href="javascript:;"></a></p>
    </div></body>
    </html><script>var oMask = document.getElementById('mask');
    var oBox = document.getElementById('box');
    var oClose=oBox.getElementsByTagName('a')[0];
    var oLogin=document.getElementById('login');
    var iH = Math.max(view().h,offsetH(),scrollH());
    oMask.style.height = iH + 'px';
    window.onload = function(){
    fnAdjust();
    oLogin.onclick=function()
    {
    show();
    fnAdjust();

    }
    oClose.onclick=function()
    {
    hide();
    }


    };
    function fnAdjust()
    {
    var iLeft = ( view().w - oBox.offsetWidth ) / 2;
    var iTop = ( view().h - oBox.offsetHeight ) / 2;
    var iLoginTop=20;
    if( isIe6() )
    {
    iTop += scrollY();
    iLoginTop+=scrollY();
    }

    oBox.style.left = iLeft + 'px';
    oBox.style.top = iTop + 'px';

    oLogin.style.right = '20px';
    oLogin.style.top = iLoginTop + 'px';

    }
    function show()
    {
    oBox.style.display='block';
    oMask.style.display='block';
    }
    function hide()
    {
    oBox.style.display='none';
    oMask.style.display='none';
    }
    window.onresize = window.onscroll=function()
    {
    fnAdjust();
    }
    /*clientHeight: offsetHeight:scrollHeight: 
    */
    function scrollY(){
    return document.body.scrollTop || document.documentElement.scrollTop;
    }
    function view(){
    return {
    w : document.documentElement.clientWidth,
    h : document.documentElement.clientHeight
    };
    }function offsetH(){
    return document.body.offsetHeight;
    }function scrollH(){
    return document.body.scrollHeight;
    }
    function isIe6(){

    var str = window.navigator.userAgent.toLowerCase();

    if( str.indexOf('msie 6') != -1)return true;

    return false;

    }
    </script>