【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，樣式死闆

對于這個登入框，有很多想法。包括這個登陸框的邊框是直線的，很突兀。而在牛腩中，講解了一個五圖像制作可變寬度的圓角框，我覺得可以考慮用上。