基本介紹:
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. 要想對話框傳遞參數,是通過vArguments來進行傳遞的。類型不限制,對於字符串類型,最大為4096個字符。也可以傳遞對象.
parent.html
復制代碼 代碼如下:
<body>
用戶名:
<input id="usernameID" type="text" readonly/>
<input id="buttonID" type="button" value="選擇輸入" />
<script type="text/javascript">
var sURL = "showModalDialog2.html";
//將父窗口對象傳給子窗口
var vArguments = window;
var sFeatures = "dialogHeight:200px;dialogWidth:450px";
document.getElementById("buttonID").onclick = function(){
//單擊"選擇輸入"按鈕,彈出對話框以供選擇輸入
window.showModalDialog(sURL,vArguments,sFeatures);
}
</script>
</body>
children.html
復制代碼 代碼如下:
<body>
<script type="text/javascript">
//單擊"選擇輸入"按鈕後,會將對應的值顯示在父窗口文本框中
//接收父窗口傳過來的對象
var fatherWindow = window.dialogArguments;
function selectInput(inputElement){
//取得用戶名
var username = inputElement.parentNode.nextSibling.firstChild.nodeValue;
//將用戶名設置到父窗口相關的位置
fatherWindow.document.getElementById("usernameID").value = username;
}
</script>
<table border="1" align="center">
<tr>
<th>
操作
</th>
<th>
用戶名
</th>
</tr>
<tr>
<td>
<input type="button" value="選擇輸入" onclick="selectInput(this)" />
</td>
<td>
張三
</td>
</tr>
</table>
</body>
最終結果:
2.可以通過window.returnValue向打開對話框的窗口返回信息,可以是布爾值,整型值等以外還可以是個js數組,當然也可以是對象.
parent.html
復制代碼 代碼如下:
<script type="text/javascript">
/**
*通過controller轉向在模擬窗口加載JSP頁面
**/
function selectUserList(param) {
var sURL = "${pageContext.request.contextPath}/SelectUserController/selUser.do?checkTip="+param.checkType+"®Field="+param.regField";
var vArguments = window;
var sFeatures = "scrollbars=no;resizable=no;help=no;status=no;center:yes;dialogHeight=580px;dialogWidth=776px"";
return window.showModalDialog(sURL,vArguments,sFeatures);
}
/**
*通過JSON傳值,並返回JSON數組
**/
function getUser(){
var retValue = selectUserList({'checkType':'','regField':'more'});
</script>