轉貼自 松露筆管麵 感謝。
ShowModalDialog與window.open，最大的不同是ShowModalDialog的父視窗是凍結，屬於原來網頁的一部分，而且父子視窗可以互相傳值。
語法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
參數說明:
sURL
必要參數，類型：字串。用來指定對話方塊要載入網頁的URL。
vArguments
非必要參數，類型：變動。用來向對話方塊傳遞參數。傳遞的參數類型不限，包括陣列等。對話方塊通過window.dialogArguments來取得傳遞進來的參數。
sFeatures
非必要參數，類型：字串。用來描述對話方塊的外觀等資訊，可以使用以下的一個或多個，用分號“;”隔開。
| 參數 | 限定值 | 說明 |
| dialogHeight | -- | 對話方塊高度，不小於100px，IE4中dialogHeight 和 dialogWidth 預設的單位是em，而IE5中是px，為方便起見，在定義modal的對話方塊時，用px做單位 |
| dialogWidth | -- | 對話方塊寬度 |
| dialogLeft | -- | 距離桌面左的距離 |
| dialogTop | -- | 離桌面上的距離 |
| center | {yes | no | 1 | 0 } | 視窗是否居中，預設yes，但仍可以指定高度和寬度 |
| help | {yes | no | 1 | 0 } | 是否顯示説明按鈕，預設yes |
| resizable | {yes | no | 1 | 0 } ［IE5+］ | 是否可被改變大小。預設no |
| status | {yes | no | 1 | 0 } ［IE5+］ | 是否顯示狀態列。預設為yes[ Modeless]或no [Modal] |
| scroll | { yes | no | 1 | 0 | on | off } | 指明對話方塊是否顯示捲軸。默認為yes |
參數傳遞方式:
父視窗
向子視窗傳遞參數採用ShowModalDialog的第2個參數(vArguments)即可，父視窗要獲取子視窗傳回的參數則可通過ShowModalDialog函數的返回值(vReturnValue )獲取。
子視窗
取得父視窗參數的方法，只要在子視窗裡下Javascript，用window物件的dialogArguments屬性來取取，例如：
var a=window.dialogArguments;
子視窗向父視窗返回參數，可用window.returnValue屬性，如：
window.returnValue=1;
window.close();
範例
父視窗
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript"> //亂數 function fnRandom(iModifier) { return parseInt(Math.random() * iModifier); } //設定打開視窗的參數 function fnSetValues() { var iHeight = oForm.oHeight.options[ oForm.oHeight.selectedIndex].text; if (iHeight.indexOf("Random") > -1) { iHeight = fnRandom(document.body.clientHeight); } var sFeatures = "dialogHeight: " + iHeight + "px;"; return sFeatures; } function fnOpen() { //呼叫設定參數涵式 var sFeatures = fnSetValues(); //傳遞參數 var sDialogArguments = document.getElementById("txtParent").value; //打開視窗 var retValue = window.showModalDialog("child.html", sDialogArguments, sFeatures); //顯示返回值 //alert(retValue); var divElement = document.getElementById("divChild"); divElement.innerHTML = retValue; } </script> <title></title></head> <body> <form name="oForm"> Dialog Height <select name="oHeight"> <option>-- Random --</option> <option>150</option> <option>200</option> <option>250</option> <option>300</option> </select> Create Modal Dialog Box 本視窗(父):<input id="txtParent" type="text" /> <input type="button" value="打開視窗" onclick="fnOpen()"> 來自子視窗:<div id="divChild"> 1</div> </form> </body></html> |
子視窗
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript"> //接收父視窗傳值 function setValue() { document.getElementById("divFromParent").innerHTML = window.dialogArguments; } //返回父視窗，並回傳值 function retParantWin() { //alert(document.getElementById("txtChild").value); window.returnValue = document.getElementById("txtChild").value; window.close(); } </script> <title></title></head> <body onload="setValue()"> <form> Child 父視窗傳值:<div id="divFromParent"> 1</div> 本視窗(子)輸入:<input id="txtChild" type="text" /> <input id="Button1" type="button" value="返回父視窗" onclick="retParantWin();"/> </form> </body></html>
|
文章標籤
全站熱搜
