- 基本介紹:
- showModalDialog() (IE 4+ 支持)
- showModelessDialog() (IE 5+ 支持)
- window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框。
- window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。
- 使用方法:
- vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
- vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
- 參數說明:
- sURL--
- 必選參數,類型:字符串。用來指定對話框要顯示的文檔的URL。
- vArguments--
- 可選參數,類型:變體。用來向對話框傳遞參數。傳遞的參數類型不限,包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。
- sFeatures--
- 可選參數,類型:字符串。用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。
- 1.dialogHeight :對話框高度,不小於100px,IE4中dialogHeight 和 dialogWidth 默認的單位是em,而IE5中是px,為方便其見,在定義modal方式的對話框時,用px做單位。
- 2.dialogWidth: 對話框寬度。
- 3.dialogLeft: 離屏幕左的距離。
- 4.dialogTop: 離屏幕上的距離。
- 5.center: {yes | no | 1 | 0 }:窗口是否居中,默認yes,但仍可以指定高度和寬度。
- 6.help: {yes | no | 1 | 0 }:是否顯示幫助按鈕,默認yes。
- 7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改變大小。默認no。
- 8.status: {yes | no | 1 | 0 } [IE5+]:是否顯示狀態欄。默認為yes[ Modeless]或no[Modal]。
- 9.scroll:{ yes | no | 1 | 0 | on | off }:指明對話框是否顯示滾動條。默認為yes。
- 下面幾個屬性是用在HTA中的,在一般的網頁中一般不使用。
- 10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印預覽時對話框是否隱藏。默認為no。
- 11.edge:{ sunken | raised }:指明對話框的邊框樣式。默認為raised。
- 12.unadorned:{ yes | no | 1 | 0 | on | off }:默認為no。
- 13.minimize:{ yes | no | 1 | 0 | on | off }:窗口最小化 默認為no。
- 14 maximize:{ yes | no | 1 | 0 | on | off }:窗口最大化 默認為no。
- 參數傳遞:
- 1.要想對話框傳遞參數,是通過vArguments來進行傳遞的。類型不限制,對於字符串類型,最大為4096個字符。也可以傳遞對象,例如:
- -------------------------------
- parent.htm
- <script>
- var obj = new Object();
- obj.name="51js";
- window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
- </script>
- modal.htm
- <script>
- var obj = window.dialogArguments
- alert("您傳遞的參數為:" + obj.name)
- </script>
- -------------------------------
- 2.可以通過window.returnValue向打開對話框的窗口返回信息,當然也可以是對象。例如:
- ------------------------------
- parent.htm
- <script>
- str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
- alert(str);
- </script>
- modal.htm
- <script>
- window.returnValue="http://www.51js.com";
- </script>
- 用window.showModalDialog 或者window.showModelessDialog打開一個模式窗口后,和父窗口的一些交互問題。
- 要進行交互操作的前提,在調用showModalDialog或者showModelessDialog方法的時候,第二個參數傳window,如:
- window.showModelessDialog('filename.htm',window,'dialogWidth=200px;dialogHeight=250px;')
- 接下來,就是取得父窗口的一些數據和方法,這是經常會用的,父窗口取子窗口的參數一般通過returnValue就可以搞定了~
- //取得父窗口的JS變量 var
- window.dialogArguments.var;
- //獲得父窗口的對象和屬性
- window.dialogArguments.form1.name.value ;
- //調用父窗口的方法 fun
- window.dialogArguments.fun() ;