如何修改一个弹出层的位置

代码如下，如何修改使得alertBox在页面水平居中和垂直居中显示。<!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>无标题文档</title>
<style>
body{margin:0;padding:0;}
#topFill{display:none;text-align:center;position:absolute;z-index = 999;filter:alpha(opacity=50);background-color:#eee;opacity: 0.5;-moz-opacity: 0.5;width:100%;}
#alertBox{margin:auto;height:150px;width:300px;background-color:#cf0;text-align:left;border:1px solid #666}
#alertTitle{height:20px;background-color:#EDF8B8;line-height:20px;padding:0 10px;border-bottom:1px solid #71860D}
#alertContent{padding:42px 0;;text-align:center;}
#alertBtn{text-align:center;}
  #alertBtn input{margin:0 10px;background:#FFFF99;border:1px solid #fff;height:20px;line-height:20px;}
</style>
<script type="text/javascript" >
//document.documentElement.clientHeight+'px'
//  onload的时候声明对象
var obj = new Object;
function oload(){
obj = document.getElementById('topFill');
obj.style.display = 'none';
}
function cl(){
document.body.style.overflow = 'hidden';
document.body.style.height = document.documentElement.clientHeight + 'px';
obj.style.display = 'block';
obj.style.height = document.documentElement.clientHeight + 'px';
}
function bcl(){
document.body.style.overflow = '';
obj.style.display = 'none';
}
function oresize(){
if(obj.style.display != 'block'){
 
}else{
  cl();
}
}
function isno(str){
if (str == 'yes'){
  window.close();
}else {
  bcl();
}
}
</script>
</head>
<body onload="oload()" onresize="oresize()">
<div id="topFill">
<div id="alertBox">
  <div id="alertTitle">警告!</div>
  <div id="alertContent">你确定要退出吗?</div>
  <div id="alertBtn"><input type="button" value="是(Y)" onclick="isno('yes')" /><input type="button" value="否(N)" onclick="isno('no')" /></div>
</div>
</div>
<input type="text" id="textaaa" />
<input type="button" value="点我" onclick="cl()"/></body>
</html>

解决方案 »

  1.   

    代码太乱 ，一般位置可以通过 element.style.top ,left控制
      

  2.   

    element.style.position = "absolute";
    element.style.top = "";
    element.style.left = "";
      

  3.   

    从title下到</head>上替换<style>
    body{margin:0;padding:0;}
    #topFill{display:none;text-align:center;position:absolute;z-index:999;filter:alpha(opacity=50);background-color:#eee;opacity: 0.5;-moz-opacity: 0.5;width:100%;}
    #alertBox{position:absolute;z-index:8888;top:0;margin:auto;height:150px;width:300px;background-color:#cf0;text-align:left;border:1px solid #666}/*有新加内容*/
    #alertTitle{height:20px;background-color:#EDF8B8;line-height:20px;padding:0 10px;border-bottom:1px solid #71860D}
    #alertContent{padding:42px 0;;text-align:center;}
    #alertBtn{text-align:center;}
      #alertBtn input{margin:0 10px;background:#FFFF99;border:1px solid #fff;height:20px;line-height:20px;}
    </style>
    <script type="text/javascript" >
    //document.documentElement.clientHeight+'px'
    //  onload的时候声明对象
    var obj = new Object;
    function oload(){
    obj = document.getElementById('topFill');
    //新加代码开始
    var winHeihgt = (document.documentElement.scrollHeight>document.documentElement.clientHeight)?document.documentElement.scrollHeight:document.documentElement.clientHeight;//文档高度
    var winWidth = document.documentElement.scrollWidth;//文档宽度
    //alert(winWidth);
    document.getElementById('alertBox').style.top = Math.floor((winHeihgt-150)/2)+'px';
    document.getElementById('alertBox').style.left = Math.floor((winWidth-300)/2)+'px';
    //新加代码结束
    obj.style.display = 'none';
    }
    function cl(){
    document.body.style.overflow = 'hidden';
    document.body.style.height = document.documentElement.clientHeight + 'px';
    obj.style.display = 'block';
    obj.style.height = document.documentElement.clientHeight + 'px';
    }
    function bcl(){
    document.body.style.overflow = '';
    obj.style.display = 'none';
    }
    function oresize(){
    if(obj.style.display != 'block'){}else{
      cl();
    }
    }
    function isno(str){
    if (str == 'yes'){
      window.close();
    }else {
      bcl();
    }
    }
    </script>
      

  4.   

    ie6  ie8 ff  要都兼容的吗 ？
    现在只有 ie6 和ff 兼容的
     可是ie8不兼容~！！
      

  5.   


    <!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></title> 
    <style> </style> 
    <script type="text/javascript" > 
    function scrollX()
    {
        var de=document.documentElement;
        return self.pageXOffset||(de&&de.scrollLeft)||document.body.scrollLeft;
    }
    function scrollY()
    {
         var de=document.documentElement;
        return self.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
    }
    function windowX()
    {
        var de=document.documentElement;
        return self.innerWidth||(de&&de.clientWidth)||document.body.clientWidth;
    }
    function windowY()
    {
        var de=document.documentElement;
        return self.innerHeight||(de&&de.clientHeight)||document.body.clientHeight;
    }
    function getStyle( elem, name ) {    
        if (elem.style[name])
            return elem.style[name];   
        else if (elem.currentStyle)
            return elem.currentStyle[name];    
        else if (document.defaultView && document.defaultView.getComputedStyle) {
            name = name.replace(/([A-Z])/g,"-$1");
            name = name.toLowerCase();
            var s = document.defaultView.getComputedStyle(elem,"");
            return s && s.getPropertyValue(name);
        } else
            return null;
    }
    function getHeight(elem)
    {
        return parseInt(getStyle(elem,"height"));
    }
    function getWidth(elem)
    {   
        return parseInt(getStyle(elem,"width"));
    }
    function show()
    {    
        var div=document.getElementById("alertBox");alert(getWidth(div)/2);
        div.style.position="absolute";    
        div.style.left=scrollX()+(windowX()/2-getWidth(div)/2)+"px";
        div.style.top=scrollY()+(windowY()/2-getHeight(div)/2)+"px";
        div.style.display="block";   
    }</script> 
    </head> 
    <body> <div id="alertBox"style="display:none;height:40px;width:50px;background:#eee;" > 
      <div id="alertTitle">1321331</div> 
      <div id="alertContent">qweqeqeqwe</div> 
      <div id="alertBtn"> <input type="button" value="wwww" onclick="isno('yes')" /> <input type="button" value="斲(N)" onclick="isno('no')"/> </div> 
    </div> 
     
    <input type="text" id="textaaa" /> 
    <input type="button" value="click" onclick="show();"/> </body> 
    </html> 写了个类似的 上面那几个函数是通用的