asp.net中层的定位问题

我写了一个div弹出窗口，在html页面下可以正常，但到了asp.net页面就不正常了div的位置在页面的上面了，请高手帮帮忙。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %><!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><style type="text/css">
div.titleBar{background: #CC66CC;margin: 0px auto;width: 100%;height: 21px;border: #0000FF solid 1px;}
div.closeButton{float: right;}
div.mainBody{margin: auto;}
#divModalDialog{border:solid 1px;background:white;POSITION: absolute;left:0px;top:0px;DISPLAY: none;z-index:49;height:200px;WIDTH: 350px;}
#divModal{BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:absolute; TOP: 0px;}
</style><script language=javascript>function showModel()
{ 
     divModalDialog.style.display = "block";
     resizeModal();
     window.onresize = resizeModal;
}
function closeModel()
{
     divModal.style.width = "0px";
     divModal.style.height = "0px";
     divModalDialog.style.display = "none";
     window.onresize = null;
}
function resizeModal()
{
     divModal.style.width = document.body.scrollWidth;
     divModal.style.height = document.body.scrollHeight;
     divModalDialog.style.left = ((document.body.offsetWidth - divModalDialog.offsetWidth) / 2);
     divModalDialog.style.top = ((document.body.offsetHeight - divModalDialog.offsetHeight) / 2);
}
</script>
</head>
<body>
   
    <input type="button" value="点击这里" onclick="showModel()" />
<DIV id="divModal"></div><DIV id="divModalDialog" >
<div class="titleBar">
    <div class="closeButton"><a href="javascript:closeModel();">[关闭]</a></div>   
</div>
<div class="mainBody">
       内容
</div>
</DIV>
  
</body>
</html>

解决方案 »

  1.   

    var eleHeight
    if(document.documentElement)
    eleHeight = document.documentElement.scrollHeight
    else
    eleHeight = document.body.scrollHeightdivModal.style.height = eleHeight + "px";依次类推
    参考
    http://blog.csdn.net/net_lover/archive/2006/08/25/1116488.aspx
      

  2.   

    造成问题的原因是因为
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    如果去掉这个也是可以的，但不推荐去掉
      

  3.   

    完整代码
    <%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" Debug="true" %>
    <!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>
    <style type="text/css">
    html,body{height:100%}
    div.titleBar{background: #CC66CC;margin: 0px auto;width: 100%;height: 21px;border: #0000FF solid 1px;}
    div.closeButton{float: right;}
    div.mainBody{margin: auto;}
    #divModalDialog {border:solid 1px;background:white;position:absolute;left:0px;top:0px;display:none;z-index:49;height:200px;width:350px;}
    #divModal {background-color: white; filter: alpha(opacity=75); left: 0px; position:absolute; top: 0px;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function showModel()
    { 
         divModalDialog.style.display = "block";
         resizeModal();
         window.onresize = resizeModal;
    }
    function closeModel()
    {
         divModal.style.width = "0px";
         divModal.style.height = "0px";
         divModalDialog.style.display = "none";
         window.onresize = null;
    }
    function resizeModal()
    {
    var eleHeight,eleWidth
    if(document.documentElement)
    {
    eleHeight = document.documentElement.scrollHeight
    eleWidth = document.documentElement.scrollWidth
    }
    else
    {
    eleHeight = document.body.scrollHeight
    eleWidth = document.body.scrollWidth
    }
    divModal.style.height = eleHeight + "px";
    divModal.style.width = eleWidth + "px";
    divModalDialog.style.left = ((document.body.offsetWidth - divModalDialog.offsetWidth) / 2);
    divModalDialog.style.top = ((document.body.offsetHeight - divModalDialog.offsetHeight) / 2);
    }
    //]]>
    </script>
    </head>
    <body>
     <input type="button" value="点击这里" onclick="showModel()" />
    <div id="divModal"></div><div id="divModalDialog">
    <div class="titleBar">
        <div class="closeButton"><a href="javascript:closeModel();">[关闭]</a></div>   
    </div>
    <div class="mainBody">
           内容
    </div>
    </div>
      
    </body>
    </html>
      

  4.   

    唉，我是微软的忠实追随者，不喜欢firefox阿。唉，微软应该好好的整理一下浏览器了。