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

 

一、实现分析

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

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

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

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

附：效果图

 

二、具体实现

2.1，HTML设计

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

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

 

网站登录
账 号： 
密 码： 
 
注册新用户|忘记密码？

 

 

 

2.2，CSS样式设计

 

 

/* 设置登录文字（“登录”）格式 */
 #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;
 }
 

 

 

 

2.3，使物体居中

 

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

 

//设置物体居中
 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

 

 

 

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

 

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

 

//触发浏览器窗口事件
 Base.prototype.resize=function(fn){window.onresize=fn;return this;
 }

 

 

 

2.5，整合调用

 

 

 //登陆框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");//退出登陆框});

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

 

 

三、学习总结

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

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

3，样式死板

 

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