求教一个相对浏览器窗口而稳定的浮动窗口

本帖最后由 lirenhome 于 2010-04-02 13:27:03 编辑

解决方案 »

  1.   

    <!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=utf-8" />
    <title> 浮动窗口</title>   
    </head>
      <body>  
      <table border="1" bordercolor="#0000FF">
      <tr><td height="1000"> </td></tr>
      <tr><td height="50"><input type="button" value=" 显示浮窗 " onClick="showInterView('bar');" >
      <table border="1" hspace="1" cellpadding="1" bgcolor="c0c0c0" id="bar" style=" display:none;position:absolute;width:600px; height:250px;z-index:9;margin:0">   
      <tr align="center">   
      <td width="25%"> <a href="#">首 页 </a></td>   
      <td width="25%"> <a href="#">你 好</a></td>   
      <td width="25%"> <a href="#">他 好</a></td>   
      <td width="25%"> <a href="#">我 好</a>   
      </td>   
      </tr>   
      </table> </td></tr>
      <tr><td height="1000"> </td></tr>
      </table>
    </body>
    </html>
    <script language="javascript">   
    <!--  
    function showInterView(id){
    var ele        = document.getElementById('bar');
    var sTop       = document.documentElement.scrollTop;
    var winHeight  = document.documentElement.clientHeight;
    var winWidth   = document.documentElement.clientWidth;
    alert(sTop);
       with(ele.style){
    display = "block";
    top     = Math.floor((winHeight - 250) / 2) + sTop + 'px';
    left    = Math.floor((winWidth - 600) / 2) + 'px';
    }
    }   
    //-->   
    </script>  
      

  2.   

    <div id="box" style="position:absolute;left:0;top:0;width:300px;height:200px;"></div><script>
    var id = document.getElementById('box');
    var Width = document.documentElement.clientWidth ;
    var Height = document.documentElement.clientHeight ;
    var selfW = id.style.width ;
    var selfH = id.style.height ;
    id.style.left = (Width-selfW)/2+"px";
    id.style.top = (Height-selfH)/2+"px";
    </script>
      

  3.   

    用 上面的 代码，再用上 经典的模拟 IE6固定定位 的CSS
      

  4.   

    <!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=utf-8" />
    <title> 浮动窗口</title>   
    </head>
      <body>  
      <table border="1" bordercolor="#0000FF">
      <tr><td height="1000"> </td></tr>
      <tr><td height="50"><input type="button" value=" 显示浮窗 " onClick="showInterView('bar');" >
      <table border="1" hspace="1" cellpadding="1" bgcolor="c0c0c0" id="bar" style=" display:none;position:fixed;width:600px;height:250px;z-index:9;margin:0">
      <tr align="center">   
      <td width="25%"> <a href="#">首 页 </a></td>   
      <td width="25%"> <a href="#">你 好</a></td>   
      <td width="25%"> <a href="#">他 好</a></td>   
      <td width="25%"> <a href="#">我 好</a>   
      </td>   
      </tr>   
      </table> </td></tr>
      <tr><td height="1000"> </td></tr>
      </table>
    </body>
    </html>
    <script language="javascript">   
    <!--  
    function showInterView(id){
    var ele        = document.getElementById('bar');
    var winHeight  = document.documentElement.clientHeight;
    var winWidth   = document.documentElement.clientWidth;
    //alert(sTop);
       with(ele.style){
    display  = "block";
    top      = Math.floor((winHeight - 250) / 2) + 'px';
    left     = Math.floor((winWidth - 600) / 2) + 'px';
    }
    }   
    //-->   
    </script>