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


一、实现分析

首先:和下拉菜单一样,需要通过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,样式死板


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



posted on 2015-07-17 16:21  何红霞  阅读(269)  评论(0编辑  收藏  举报