Ajax+jQuery實現LightBox與伺服器通訊

LightBox效果又叫windows關機效果。就是像windows關機時一樣，案頭上的應用失效而只能點擊關機等框內的幾個按鈕。在網頁中其實就是利用了兩個層。其中一個設定成半透明遮住整個螢幕，另一個放在其上面用來顯示內容。

在寫之前看過了cloudgamer的效果，自認JavaScript功力遠不及他。參考了他的效果之後寫了這個簡單版並加入了LightBox與伺服器的通訊。

為了方便示範，我把代碼都寫到一個檔案裡了，css也直接寫在行內。

首先是覆蓋層：

<div id="coverLayer" style=" display:none; background:#000000;　 position:absolute; "></div>　　　　

先不讓他顯示、黑色背景、絕對位置。

然後是LightBox：

1　　　 <div id="lightBox" style=" display:none; width:300px; height:200px;position:absolute;z-index:1001; background:#ffffff; left:50%; top:50%; margin-left:-150px; margin-top:-100px; border:#00FFFF double 4px;">
2　　　　　　　 <a id="discover" href="#" onclick="discover();">關閉</a>
3　　　　　　　 <form id="formLogin">
4　　　　　　　 <p>使用者名稱：<input id="tbUserName" name="tbUserName" type="text" /></p>
5　　　　　　　 <p>密碼：<input id="tbPassword" name="tbPassword" type="password" /></p>
6　　　　　　　 <p><input id="btnLogin" name="" type="button" value="登入" onclick="Login();" /></p>
7　　　　　　　 </form>
8　　　 </div>
9

要與資料庫通訊，我放了一個表單在裡面擷取輸入。兩個文字框、一個按鈕。還有一個關閉LightBox的串連。對於LightBox的樣式。首先還是不讓其顯示，高、寬這樣的就不用說了。絕對位置。設定z-index為1001保證他顯示在最上面。白色背景。left:50%; top:50%; margin-left:-150px; margin-top:-100px;讓其置中。這是css中一種比較常見的設定塊狀容器置中的方法。當然，這和容器的定位有關。cloudgamer的文章中也講到了這種方法。要瞭解更多的關於css的東西可以去標準之路 http://www.aa25.cn/ 或者藍色理想 http://www.blueidea.com/等地方。當然園子裡也很多。（好像有點囉嗦-_-）之後是為了好看設定了一個4像素的邊框。

再是要一個開啟LightBox的連結

<a id="cover" href="#" onclick="cover();">登入</a>

單擊他就執行cover（）；覆蓋函數。

最後加了一個select用於在IE中屏蔽的測試

1　 <form >
2　　　　 <label>select
3　　　　　　　 <select name="select" id="select" >
4　　　　　　　　　　　 <option>測試Select覆蓋</option>
5　　　　　　　　　　　 <option>測試Select覆蓋</option>
6　　　　　　　 </select>
7　　　　 </label>
8 </form>