zDiaLog彈出層
插件描述：zDiaLog彈出層
彈出框：
- 代替window.open、window.alert、window.confirm；提供良好的用戶體驗；
- 水晶質感，設計細膩，外觀漂亮；
- 兼容ie6/7/8、firefox2/3、Opera；彈出框在ie6下不會被select控件穿透；
- 無外部css文件，引用Dialog.js即可使用；
- 對iframe下的應用作了充分考慮，適合復雜的系統應用；
- Dialog顯示的內容（三種）：1、指向一個URL的iframe窗口；2、頁面內隱藏的元素中的html內容；3、直接輸出一段html內容；
- 按ESC鍵可關閉彈出框；
zDialog v2.0 - samples
彈出框：
- 代替window.open、window.alert、window.confirm；提供良好的用戶體驗；
- 水晶質感，設計細膩，外觀漂亮；
- 兼容ie6/7/8、firefox2/3、Opera；彈出框在ie6下不會被select控件穿透；
- 無外部css文件，引用Dialog.js即可使用；
- 對iframe下的應用作了充分考慮，適合復雜的系統應用；
- Dialog顯示的內容（三種）：1、指向一個URL的iframe窗口；2、頁面內隱藏的元素中的html內容；3、直接輸出一段html內容；
- 按ESC鍵可關閉彈出框；
主調函數參數說明：
Dialog.open({ID,Title,URL,InnerHtml,InvokeElementId,Width,Height,Top,Left,Drag,OKEvent,ShowButtonRow,MessageTitle,Message,AutoClose,OnLoad})- ID：窗口id號，可省略。每個窗口的id必須是唯一的不能重復。
- Title：窗口標題。如不寫此項默認值為""。
- URL： 窗口內容頁地址，或使用相對路徑或絕對路徑，注意如果使用http://www.baidu.com形式的絕對地址，則http://不能省略。
- InnerHtml： 窗口內容html代碼，用於直接輸出html內容，注意不要讓生成的內容因為不適當的寬度或定位方式而破壞了Dialog的外觀。
- InvokeElementId： 本頁面內隱藏的元素的id，用於顯示頁面內隱藏的元素中的html內容，注意不要讓內容因為不適當的寬度或定位方式而破壞了Dialog的外觀。
- Width：窗口寬度（dialog內容區寬度），值為數值型，默認值為窗口可見寬的40%。
- Height：窗口高度（dialog內容區高度），值為數值型，默認值為窗口可見寬的20%。
- Left：窗口距瀏覽器左邊距離，值為數值型或字符串型（當使用百分比時為字符串型），如Left:"0%",Top:"0%"為左上，Left:"50%",Top:"50%"為居中，Left:"100%",Top:"100%"為右下。
- Top：窗口距瀏覽器頂端距離，值為數值型或字符串型（百分比）。
- Drag：是否允許拖動窗口，值為布爾型(true|false)，默認值為true，注意需要頁面引用了Drag.js。
- OKEvent：點擊確定按鈕后執行的函數。
- CancelEvent：點擊取消按鈕或點擊關閉按鈕后執行的函數，默認為關閉本Dialog。
- ShowButtonRow：是否不顯示按鈕欄，值為布爾型(true|false)，默認值為false，當定義了OKEvent或調用了addButton時自動設為true。
- MessageTitle,Message：自定義的窗口說明欄中的小標題和說明。
- ShowMessageRow：是否顯示窗口說明欄，值為布爾型(true|false)，默認值為false，當定義了MessageTitle或Message時自動設為true。
- AutoClose：是否自行關閉，值為數值型，默認值為false。
- OnLoad：窗口內容載入完成后執行的程序，值為函數型。
1. 普通窗口
Dialog.open({URL:"test.html"});
2. 設定了高寬和標題的普通窗口
var diag = new Dialog(); diag.Width = 600; diag.Height = 300; diag.Title = "設定了高寬和標題的普通窗口"; diag.URL = "test.html"; diag.show();
3. 內容頁為外部連接的窗口
var diag = new Dialog(); diag.Width = 900; diag.Height = 400; diag.Title = "內容頁為外部連接的窗口"; diag.URL = "http://www.baidu.com/"; diag.show();
4. 內容頁為html代碼的窗口
var diag = new Dialog(); diag.Width = 300; diag.Height = 100; diag.Title = "內容頁為html代碼的窗口"; diag.InnerHtml='<div >直接輸出html，使用 <b>InnerHtml</b> 屬性。</div>' diag.OKEvent = function(){diag.close();};//點擊確定后調用的方法 diag.show();
5. 內容頁為隱藏的元素的html內容
var diag = new Dialog(); diag.Width = 300; diag.Height = 150; diag.Title = "內容頁為隱藏的元素的html"; diag.InvokeElementId="forlogin" diag.OKEvent = function(){$id("username").value||Dialog.alert("用戶名不能為空");$id("userpwd").value||Dialog.alert("密碼不能為空")};//點擊確定后調用的方法 diag.show();
6. 在調用頁面按鈕關閉彈出窗口
var diag = new Dialog(); diag.Modal = false; diag.Title = "彈出沒有遮罩層的窗口"; diag.URL = "test.html"; diag.show();關閉窗口按鈕代碼： Dialog.close();
7. 在指定位置彈出窗口
var diag = new Dialog(); diag.Width = 200; diag.Height = 100; diag.Modal = false; diag.Title = "在指定位置彈出窗口"; diag.Top="100%"; diag.Left="100%"; diag.URL = "test.html"; diag.show();注：可使用數字或百分比（帶百分比符號的字符串）來定義相對於當前窗口的位置，換算效果同css中用百分比定義背景圖位置，如Left:"0%",Top:"0%"為左上，Left:"50%",Top:"50%"為居中，Left:"100%",Top:"100%"為右下。
8. 返回值到調用頁面
var diag = new Dialog(); diag.Title = "返回值到調用頁面"; diag.URL = "test.html"; diag.OKEvent = function(){$id('getval').value = diag.innerFrame.contentWindow.document.getElementById('a').value;diag.close();}; diag.show(); var doc=diag.innerFrame.contentWindow.document; doc.open(); doc.write('<html><body><input id="a" type="text"/>請在文本框里輸入一些值</body></html>') ; doc.close();
9. 代替window.alert及window.confirm
Dialog.alert("提示：你點擊了一個按鈕"); Dialog.confirm('警告：您確認要XXOO嗎？',function(){Dialog.alert("yeah，周末到了，正是好時候")});注：Dialog.alert(msg, func, w, h)第二個參數為點擊“確定”按鈕后執行的函數。
Dialog.confirm(msg, funcOK, funcCal, w, h)第二個參數為點擊“確定”按鈕后執行的函數，第三個參數為點擊“取消”按鈕后執行的函數。
10. 創建其它按鈕
var diag = new Dialog(); diag.Title = "創建其它按鈕"; diag.URL = "test.html"; diag.show(); diag.addButton("next","下一步",function(){ var doc=diag.innerFrame.contentWindow.document; doc.open(); doc.write('<html><body>進入了下一步</body></html>') ; doc.close(); })
11. 帶有內容說明欄的新窗口
var diag = new Dialog(); diag.Title = "帶有說明欄的新窗口"; diag.Width = 900; diag.Height = 400; diag.URL = "http://www.baidu.com/"; diag.MessageTitle = "澤元網站內容管理系統"; diag.Message = "澤元網站內容管理系統是一個基於J2EE及AJAX技術的企業級網站內容管理系統"; diag.show();
12. 顯示窗體內容頁面標題
var diag = new Dialog(); diag.URL = "http://www.baidu.com/"; diag.show();注：如果窗體內為iframe內容頁，並且沒有設置Title屬性，並且引用頁和當前頁在同一個域內，則顯示顯示窗體內容頁面標題。
13. 在彈窗的內容載入完成后，執行方法
var diag = new Dialog(); diag.OnLoad=function(){alert("頁面載入完成")}; diag.URL = "http://www.baidu.com/"; diag.show();注：如果窗體內為iframe內容頁，要在載入完成后對內容頁作操作，必須考慮訪問權限，如引用頁和當前頁應在同一個域內。
14. 點擊取消及關閉時執行方法
var diag = new Dialog(); diag.Title = "點擊取消或關閉按鈕時執行方法"; diag.CancelEvent=function(){alert("點擊取消或關閉按鈕時執行方法");diag.close();}; diag.URL = "test.html"; diag.show();
15. 不允許拖拽
var diag = new Dialog(); diag.Drag=false; diag.URL = "test.html"; diag.show();
16. 動態改變窗口大小
var diag = new Dialog(); diag.Title = "修改中窗體尺寸"; diag.URL = "javascript:void(document.write(\'這是彈出窗口中的內容\'))"; diag.OKEvent = function(){ var doc=diag.innerFrame.contentWindow.document; doc.open(); doc.write('<html><body>窗口尺寸改為600*300</body></html>') ; doc.close(); diag.setSize(600,300); }; diag.show(); diag.okButton.value="改變窗口大小"
17. 彈出窗口自動關閉
var diag = new Dialog(); diag.AutoClose=5; diag.ShowCloseButton=false; diag.URL = "javascript:void(document.write(\'這是彈出窗口中的內容\'))"; diag.show();注：AutoClose為自動關閉時間，單位秒
18. 設置確定按鈕及取消按鈕的屬性
var diag = new Dialog(); diag.Title="設置確定按鈕及取消按鈕的屬性"; diag.ShowButtonRow=true; diag.URL = "test.html"; diag.show(); diag.okButton.value=" OK "; diag.cancelButton.value="Cancel";
19. 窗體內的按鈕操作父Dialog
var diag = new Dialog(); diag.Title = "窗體內的按鈕操作父Dialog"; diag.URL = "test.html"; diag.show(); var doc=diag.innerFrame.contentWindow.document; doc.open(); doc.write('<html><body><input type="button" id="a" value="修改父Dialog尺寸" \ onclick="parentDialog.setSize(function(min,max){return Math.round(min+(Math.random()*(max-min)))}(300,800))" \ /><input type="button" id="b" value="關閉父窗口" onclick="parentDialog.close()" /></body></html>') ; doc.close();