为了账号安全,请及时绑定邮箱和手机立即绑定

我的代码哪里错了‘,为什么登录框不居中?


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>鼠标拖拽效果</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="手机号/电子邮箱/用户名">

        </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>


正在回答

1 回答

el.style.left=-(bodyW-elW)/2 +"px"

el.style.top=-(bodyH-elH)/2 +"px"

这两行错了,不应该加负号,去掉就可以了。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

我的代码哪里错了‘,为什么登录框不居中?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号