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>
[解决办法]
var eleHeight
if(document.documentElement)
eleHeight = document.documentElement.scrollHeight
else
eleHeight = document.body.scrollHeight
divModal.style.height = eleHeight + "px ";
依次类推
参考
http://blog.csdn.net/net_lover/archive/2006/08/25/1116488.aspx
[解决办法]
造成问题的原因是因为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd ">
如果去掉这个也是可以的，但不推荐去掉
[解决办法]
完整代码
<%@ 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>
