zDialog的使用以及Demo及下載地址

阿新 • • 發佈：2018-12-23

彈出框：

代替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.5icool.org形式的絕對地址，則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.5icool.org/";
	diag.show();

4. 內容頁為html程式碼的視窗

	var diag = new Dialog();
	diag.Width = 300;
	diag.Height = 100;
	diag.Title = "內容頁為html程式碼的視窗";
	diag.InnerHtml='<div style="text-align:center;color:red;font-size:14px;">直接輸出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.5icool.org/";
	diag.MessageTitle = "澤元網站內容管理系統";
	diag.Message = "澤元網站內容管理系統是一個基於J2EE及AJAX技術的企業級網站內容管理系統";
	diag.show();

12. 顯示窗體內容頁面標題

	var diag = new Dialog();
	diag.URL = "http://www.5icool.org/";
	diag.show();

注：如果窗體內為iframe內容頁，並且沒有設定Title屬性，並且引用頁和當前頁在同一個域內，則顯示顯示窗體內容頁面標題。

13. 在彈窗的內容載入完成後，執行方法

	var diag = new Dialog();
	diag.OnLoad=function(){alert("頁面載入完成")};
	diag.URL = "http://www.5icool.org/";
	diag.show();

注：如果窗體內為iframe內容頁，要在載入完成後對內容頁作操作，必須考慮訪問許可權，如引用頁和當前頁應在同一個域內。

14. 點選取消及關閉時執行方法

X 我是隱藏內容

	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();