zDialog彈出框: 代替window.open、window.alert、window.confirm;提供良好的用戶體驗; 水晶質感,設計細膩,外觀漂亮; 相容ie6/7/8、firefox2/3、Opera;彈出框在ie6下不會被select控制項穿透; 無外部css文件,引用Dialog.j ...
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文件
- <script type="text/javascript" src="//ku.shouce.ren/libs/zDialog/js/zDrag.js"></script>
- <script type="text/javascript" src="//ku.shouce.ren/libs/zDialog/js/zDialog.js"></script>
使用方法
- function open1()
- {
- Dialog.open({URL:"http://shouce.ren/example/show/s/7028"});
- }
- function open2()
- {
- var diag = new Dialog();
- diag.Width = 400;
- diag.Height = 180;
- diag.Title = "設定了高寬和標題的普通視窗";
- diag.URL = "http://shouce.ren/example/show/s/7028";
- diag.show();
- }
- <input type="button" id="a" value="普通視窗" onclick="open1()"/>
- <input type="button" id="a" value="普通視窗" onclick="open2()"/>
主調函數參數說明
- Dialog.open({ID,Title,URL,InnerHtml,InvokeElementId,Width,Height,Top,Left,Drag,OKEvent,
- ShowButtonRow,MessageTitle,Message,AutoClose,OnLoad})
ID | 視窗id號,可省略。每個視窗的id必須是唯一的不能重覆。 |
Title | 視窗標題。如不寫此項預設值為""。 |
URL | 視窗內容頁地址,或使用相對路徑或絕對路徑,註意如果使用http://shouce.ren形式的絕對地址,則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 | 視窗內容載入完成後執行的程式,值為函數型。 |
下載