類似于thinkbox，lightbox等。用于以一種別致的模式對(duì)話框方式展示頁面，圖片或者其它內(nèi)容。這是它的官網(wǎng)：http://orangoo.com/labs/GreyBox/ 我們先來看一下它的幾個(gè)實(shí)例：
(1) 打開網(wǎng)頁：
(2) 顯示一組圖片：
基本使用
(1) 進(jìn)入官網(wǎng)，點(diǎn)擊下載
(2) 解壓。(其中的 installation.html 對(duì)其使用進(jìn)行了說明，很簡單，一看就明白。我還是寫一下步驟吧)
(3) 將其中的 greybox 文件夾拷貝到 web 項(xiàng)目根目錄下，注意：一定要放在 web 根目錄下，放在其他目錄或二級(jí)目下肯能不能使用，在我的工程里是這么部署的：
（順便說下教訓(xùn)，一開始我將其放在了 js 文件夾下，因?yàn)槲业?js 腳本都在里面放的，jQuery 也在，可就是不能用。。。最后放在了 根目錄下就可以使用了。）
(4) 現(xiàn)在就可以使用了，我們用一個(gè)測(cè)試頁來進(jìn)行測(cè)試，代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<!-- GreyBox引用開始 -->
<script type="text/javascript">
var GB_ROOT_DIR = "./greybox/"; //注意這里的路徑！！！
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- GreyBox引用結(jié)束 -->
</head>
<body>
<a title="百度" rel="gb_page[500, 500]">百度一下</a>
</body>
</html>
這樣就完成了基本的使用。
但是，在實(shí)際開發(fā)中，我們需要實(shí)現(xiàn)這樣的效果：(1) 通過點(diǎn)擊 button 來彈出模式窗口；(2) 關(guān)閉模式窗口后，刷新父窗口。
通過基本使用，我們可以看到官網(wǎng)的示例都是在點(diǎn)擊一個(gè)超鏈接后彈出模態(tài)對(duì)話框。
等等。
但對(duì)于實(shí)際開發(fā)，我們有時(shí)需要實(shí)現(xiàn)通過點(diǎn)擊 Button 來彈出一個(gè)模態(tài)對(duì)話框。其實(shí)，稍作修改就可以實(shí)現(xiàn)了，由于前篇文章已經(jīng)對(duì)使用做了說明，這次就直接上代碼了：
(1) 實(shí)現(xiàn)按鈕點(diǎn)擊彈出模態(tài)對(duì)話框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<!-- GreyBox引用開始 -->
<script type="text/javascript">
var GB_ROOT_DIR = "./greybox/"; //注意這里的路徑！！！
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- GreyBox引用結(jié)束 -->
<script type="text/javascript">
//居中彈出模態(tài)窗口
function openWinCenter() {
//GB_showCenter(caption, url, /* optional */ height, width, callback_fn)
GB_showCenter("百度一下", "http://www.baidu.com", 600, 900);
}
//全屏彈出模態(tài)窗口
function openWinFull() {
//GB_showFullScreen(caption, url, callback_fn)
GB_showFullScreen("百度一下", "http://www.baidu.com");
}
</script>
</head>
<body>
<input type="button" value="居中彈出" onclick="openWinCenter()"><br/>
<input type="button" value="全屏彈出" onclick="openWinFull()"><br/>
</body>
</html>
具體用法可以看官方文檔的“Advance Usage”部分。
(2) 開發(fā)過程中還會(huì)遇到這樣的問題，在彈出窗口進(jìn)行操作后，關(guān)閉時(shí)需要對(duì)父窗口進(jìn)行刷新。怎么實(shí)現(xiàn)？
我們先看一下普通的 js 是怎么寫的
<script language="javascript">
//彈出窗口
function openSubWin() {
window.open("","name1","width=100,height=200,toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100");
}
//關(guān)閉子窗口，刷新父窗口
function closeSubWin() {
window.opener.location = "http://www.baidu.com";
window.close();
}
</script>
那如果使用 GreyBox 怎么實(shí)現(xiàn)呢？上代碼，【注意】這個(gè) js 是在子窗口的網(wǎng)頁中寫的：
<script type="text/javascript">
function close() {
parent.parent.location.reload();
parent.parent.GB_hide();
}
</script>
好了，至此就完成了對(duì)于 GreyBox 的學(xué)習(xí)，這些基本就可以滿足我們?nèi)粘５捻?xiàng)目需要了。
