[轉載]JQuery彈窗視窗外掛程式

原出處：http://cto.xujun.org/soft/jquery/lhgdialog/

快顯視窗外掛程式介紹

lhgdialog 是一個使用簡單，代碼簡潔高效且功能強大的快顯視窗外掛程式。
專為大型快顯視窗定製
相對於網上其它快顯視窗外掛程式主要功能是提示資訊來說，本外掛程式主要是用來製作視窗中內容較多，頁面比較複雜的視窗。本外掛程式的視窗內容面主要是以嵌入iframe架構為主，內容頁為一個單獨的頁面。這樣就可以更方便的管理內容頁，頁面的樣式也不受其它頁面的影響，而且內容頁可以是靜態或動態任何一種檔案。
強大靈活的介面機制
由於本外掛程式主要是用來製作大型的視窗，頁面和視窗間的互動肯定會非常頻繁，所以本外掛程式提供了豐富的互動控制介面，可以非常方便的進行頁面間的資料的傳輸。
完美的jQuery外掛程式
由於本外掛程式所需的lhgcore.min.js庫檔案就相當於一個精簡的jQuery庫，所以本外掛程式的代碼的書寫方式和jQ的一樣精簡。如果您想把它做的jQ的外掛程式，只要在頁面引入jQuery的庫（此時不再需要引入lhgcore.min.js庫檔案），代碼作一下非常簡單的修改即可。
跨瀏覽器安全色
相容：IE6+、Firefox、Chrome、Safari、Opera，瀏覽器版本越高體驗越好。並且IE6下也能支援現代瀏覽器的靜止定位(fixed)，支援覆蓋下拉控制項。
使用協助

調用方式
一、使用傳統的函數方法調用
function opdlg( id ){
var dlg = new J.dialog({
id: id,
title: '測試頁',
html: '歡迎使用lhgdialog快顯視窗外掛程式',
rang: true
});
dlg.ShowDialog();
// 或者這樣寫
var dlg = new J.dialog({ id: id, ... }).ShowDialog();
}
運行»
二、使用jQ方式調用
J('#btn2').dialog({ id:'test2', page:'value/content.html', cover:true });
運行»
接下來將有幾個表格列舉lhgdialog的全部功能，你需要的時候可以使用它們。
配置參數
名稱類型預設值描述
內容
title字串'lhgdialog快顯視窗'標題內容。
page字串null視窗的內容頁為一個單獨的分頁檔，這個檔案的路徑是內容頁面檔案相對於調用視窗外掛程式的路徑或也可使用絕對路徑。如果此參數的值為不同域的外部連結，那一定要使下面的link參數為真
link布爾false是否為外部連結，如果是此參數一定要為真，不然程式會出錯
html字串null視窗的內容頁為HTML代碼，可以是HTML代碼或DOM對象
對象
尺寸
width數值400設定內視窗的寬度
height數值300設定視窗的高度
位置
fixed布爾false開啟靜止定位
left數值'center'X軸的座標。如果開啟了fixed則原點以瀏覽器視口為基準。可以使用'left'、'center'、'right'這些關鍵字
字串
top數值'center'Y軸的座標。如果開啟了fixed則原點以瀏覽器視口為基準。可以使用'top'、'center'、'bottom'這些關鍵字
字串
進階
id字串'lhgdlgId'自訂對話方塊ID屬性，要保證在頁面中是唯一的，不能和頁面中任何元素的id相同
cover布爾false開啟鎖屏。中斷使用者對話方塊之外的互動，用於顯示非常重要的操作/訊息
drag布爾true是否允許使用者拖動對話方塊
resize布爾true是否允許拖動改變視窗大小
rang布爾true是否限制挪動與定位範圍
SetTopWindow對象null指定視窗彈出時的頁面的window對象，如果是在架構中，你可以指定架構中的任意頁面，如不指定則在架構的最頂層頁面彈出
regDragWindow數組null註冊拖動的頁面的window對象數組，這個參數的作用就是拖動時如果滑過沒註冊的頁面時會有停頓的感覺
parent對象null子視窗的父視窗對象，此參數只用在彈出的視窗中再彈出子視窗時指定父視窗對象，具體使用方法參照樣本
cusfn函數null自訂函數，注意：只有內容頁參數為html時，此參數才可以使用，而使用page參數時此參數不可用
需要對彈出後的對話方塊操作？下面介紹的就是lhgdialog的控制介面了。
每次產生一個對話方塊後，它都會返回控制介面，如調用關閉介面，我們可以先定義一個變數引用對話方塊傳回值：
var testDialog = J.dialog({
id: 'testDialog01',
html: '我初始化後會返回控制介面，請注意接收'
});
然後在可以在其他地方調用"cancel"方法關閉對話方塊：
testDialog.cancel();
如果使用page參數，則要在內容頁中引入 frameElement.lhgDG 這個介面對象，例如我樣本中的content.html這個內容頁樣本：
var dg = frameElement.lhgDG;
dg.addBtn( 'close', '取消', dg.cancel );
//這裡調用了增加按鈕的方法，視窗增加了個取消按鈕，此按鈕調用了視窗的關閉的方法：cancel()
});
好了，介紹了控制介面的用途，下面就是控制介面列表：
控制介面
名稱傳回值描述
cancel()null關閉對話方塊
reDialogSize(width,height)null重新指定視窗的大小
addBtn(id,txt,fn)null建立新的按鈕
removeBtn(id)null移除視窗中的按鈕
dg{Object}視窗元素DOM對象，可通過此對象對視窗和視窗內元素進行操作
topWin{Object}快顯視窗所在的頂層頁面的window對象
topDoc{Object}快顯視窗所在的頂層頁面的document對象
curWin{Object}載入快顯視窗外掛程式的頁面的window對象
curDoc{Object}載入快顯視窗外掛程式的頁面的document對象
dgWin{Object}如果參數為page，且link參數不為真，那這個就是內容頁的window對象
dgDoc{Object}如果參數為page，且link參數不為真，那這個就是內容頁的document對象
jQuery + lhgdialog
lhgdialog也可以作為為jQuery的一個外掛程式，首先要引入jQuery的庫檔案（此時不再需要引入lhgcore.min.js庫檔案），然後有個地方要改一下，就是lhgdialog.js檔案的最後小括弧裡的代碼lhgcore要改成jQuery，修改方法： })(lhgcore)改成 })(jQuery)，方法與參數同上。調用樣本：
// 普通調用
function opdlg( id )
{
var dlg = new $.dialog({ id: id, ... }).ShowDialog();
}
// 使用jQuery選取器
$('#btn').dialog({ id:'test2', page:'content.html', cover:true });
示範

視窗內容頁間的傳值：value/value.html
跨架構下常用方法示範：frameset/iframeTop.html
下載

下載：http://files.cnblogs.com/lhgstudio/lhgdialog.rar
Code license:
GNU Lesser General Public License
應用到你的項目

在頁面head引入二個js檔案。
<script type="text/javascript" src="lhgcore.min.js"></script>
<script type="text/javascript" src="lhgdialog.min.js"></script>
註：lhgcore.min.js一定要在lhgdialog.min.js前引入