我的代碼哪里錯(cuò)了‘,為什么登錄框不居中?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠標(biāo)拖拽效果</title>
<style>
html{ height:100%;}
body{ background: url(img/baidu_demo.png) no-repeat top center; font-size:16px; font-family:"Microsoft YaHei UI"; }
.xier-ui-dialog{
?width:380px; height:auto;
?z-index:9000;
?position:absolute;
?top:100px;
?left:100px;
?border:1px #ccc solid;
}
.xier-ui-title{
height:38px; line-height:38px; color:#666;
padding-left: 20px; background-color:#efefef;
cursor:move;
user-select:none;?
}
.xier-ui-closebutton{
width:16px;
height:16px;
display:block;
position:absolute;
top:12px;
right:20px;
background:url(img/close_def.png) no-repeat;
cursor:pointer;
}
.xier-ui-closebutton:hover{
background:url(img/close_hov.png) no-repeat;
}
.xier-ui-content{
padding:15px 20px;
background-color:#fff;
}
.xier-ui-input{ display:block; width:100%;height:40px; margin-bottom:12px; border:1px #ccc solid;
font-size:16px; text-indent:25px; outline:none;
color:#ccc;
}
.ui-dialog-input-name{ background: url(img/input_username.png) no-repeat top left; }
.ui-dialog-input-password{ background: url(img/input_password.png) no-repeat top left;}
.xier-ui-submit{ width:100%; height:40px; line-height:40px; display:block; background:#3b7ae3;border:none;font-size: 16px;color: #fff; text-decoration:none;
? text-align:center;}
? .ui-dialog-l40{ height:40px; line-height:40px; text-align:right;}
? /*遮罩層*/
? .link{ text-align:right; line-height:20px; padding-right:20px;}
? .xier-ui-marst{ width:100%; height:100%; background-color:#000; opacity:0.4; filter:alpha(opacity:40); position:absolute; top:0px; left:0px; display:none;}
??
</style>
</head>
<body>
<!--登錄框-->
<div class="xier-ui-dialog" id="dialog">
<div class="xier-ui-title" id="dialogTitle">登錄通行證
? ? <div class="xier-ui-closebutton"></div>
? ? </div>
<div class="xier-ui-content">
? ? <div class="xier-ui-L40">
? ? ? ? <input type="input" class="xier-ui-input ui-dialog-input-name" value="手機(jī)號/電子郵箱/用戶名">
? ? ? ? </div>
? ? <div class="xier-ui-L40">
? ? ? ? <input type="input" class="xier-ui-input ui-dialog-input-password" value="密碼">
? ? ? ? </div>
? ? ? ? <div class="ui-dialog-l40"><a href="##">忘記密碼</a></div>
? ? ? ? <div><a href="##" class="xier-ui-submit">登錄</a></div>
? ? ? ? <div class="ui-dialog-l40"><a href="##">立即注冊</a></div>
? ? </div>
</div>
<!--遮罩層-->
<div class="link"><a href="javascript:showDialog();">登錄</a></div>
<div class="xier-ui-marst" id="marst" onselectstart="return flase"></div>
<script type="text/javascript">
//獲得元素對象
?function g(id){
return document.getElementById(id);
}
// 自動居中 ?-登錄浮動(el=Element)
function autoCenter( el ){
var bodyW=document.documentElement.clientWidth;
var bodyH=document.documentElement.clientHeight;
var elW=el.offsetWidth;
var elH=el.offsetHeight;
el.style.left=-(bodyW-elW)/2 +"px"
el.style.top=-(bodyH-elH)/2 +"px"
}
// 自動全屏遮罩
??
</script>
</body>
</html>
2016-10-25
el.style.left=-(bodyW-elW)/2 +"px"
el.style.top=-(bodyH-elH)/2 +"px"
這兩行錯(cuò)了,不應(yīng)該加負(fù)號,去掉就可以了。