【JavaScript 12—应用总结】：弹出登录框

导读：上篇博客中，做好了个人中心的下拉菜单，这次，将做每个网站都会有的一个登录功能，以此类推，可以做出别的想要的弹出框，如错误提示啦，或者注册。

一、实现分析

首先：和下拉菜单一样，需要通过CSS样式将弹出登录框的基本样式设计好。

其次：需要控制弹出框弹出在屏幕显示的位置，所以需要一个固定位置的方法。

然后：浏览器可能会放大，缩小等，当出现这些状态的时候，弹出框的位置也会随着改变，所以，需要一个动态改变位置的方法。

最后：是整合方法和样式，通过HTML综合显示实现。

附：效果图

二、具体实现

2.1，HTML设计

首先，是在靠着个人中心旁边的一个登录图标，这个则是和个人中心在同一个div（header）之下：<div class="login">登录</div>

其次，是关于网站登录这个弹出框的设计：

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;"><div id="login">
<h2><img src="Images/close.png" alt="" class="close"/>网站登录</h2>
<div class="user">账 号： <input type="text" name="user" class="text"></div>
<div class="pass">密 码： <input type="password" name="pass" class="text"></div>
<div class="button"><input type="button" class="submit" value=""/> </div>
<div class="other">注册新用户|忘记密码？</div>
</div></span></span>

2.2，CSS样式设计

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">/* 设置登录文字（“登录”）格式 */
#header .login{
float:right;
width:45px;
height:38px;
cursor:pointer;
color:red;
line-height:38px;

}

/* 设置登陆框（整体）格式 */
#login{
margin-top:8px;
border:1px solid #ccc;
height:250px;
width:300px;
position:absolute;
display:none;
}

/* 设置“网站登录”格式 */
#login h2{
height:40px;
text-align:center;
font-size:20px;
letter-spacing:2px;
color:#666;
background:url(Images/login-header.png) repeat-x;
margin:0 0 20px 0;
padding:0;
border-bottom:1px solid #ccc;
line-height:40px;

}

/* 设置退出图片（X退出）样式 */
#login h2 img{
float:right;
position:relative;
top:14px;
right:8px;
cursor:pointer;
}

/* 设置“账号”和“密码”格式 */
#login  div.user,#login div.pass{
font-size:14px;
color:#666;
padding:5px 0;
text-align:center;
}

/* 设置文本框样式 */
#login input.text{
width:200px;
height:25px;
border:1px solid #ccc;
background:#fff;
font-size:14px;
}

/* 设置按钮（图片）样式 */
#login .button{
text-align:center;
padding:20px 0;
}
/* 设置登录按钮样式（在控件上加载图片） */
#login input.submit{
width:130px;
height:40px;
background:url(Images/login-button.png) no-repeat ;
border:none;
cursor:pointer;
}

/* 设置注册新用户样式 */
#login .other{
text-align:right;
padding:5px 1px;
font-size:14px;
}
</span></span>

2.3，使物体居中

使物体居中，则需要通过调整上、左的像素，在这之中还需要考虑弹出框本身的宽和长。

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">//设置物体居中
Base.prototype.center=function(width,height){
var top=(document.documentElement.clientHeight-150)/2;
var left=(document.documentElement.clientWidth-350)/2;
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.top=top+"px";
this.elements[i].style.left=left+"px";
}
return this;
}</span></span>

2.4，触发浏览器事件（大小改变）

这里所说的触发浏览器事件，则指浏览器变大或者变小，可以通过这个方法以及物体居中两个方法，将弹出框，不管在多大的浏览器中，始终都是居中显示。

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">//触发浏览器窗口事件
Base.prototype.resize=function(fn){
window.onresize=fn;
return this;
}</span></span>

2.5，整合调用

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;"> //登陆框
var login=$().getId("login");
login.center(250,150).resize(function(){
login.center(350,250);//先居中，在改变浏览器大小之后，再次调用center居中方法，使其再次居中
});

$().getClass("login").click(function(){
login.css("display","block");//弹出登录框
});
$().getClass("close").click(function(){
login.css("display","none");//退出登陆框
});</span></span>

以上，就实现了当点击登录时，就能居中显示登录框，当点击登陆框中的退出（小红叉）时，就能关闭登录框。再则就是，当我们随意改变浏览器大小时，弹出的登陆框始终都是居中显示的。

三、学习总结

1，弹出框居中显示，如何实现拖动？

2，没有层次感，当出现弹出框时，焦点应该聚集到弹出框，间接告诉用户当前应该处理弹出框的事儿。

3，样式死板

对于这个登录框，有很多想法。包括这个登陆框的边框是直线的，很突兀。而在牛腩中，讲解了一个五图像制作可变宽度的圆角框，我觉得可以考虑用上。