JS中showModalDialog 的使用解析

更新時間：2013年04月17日 21:59:02 作者：

JS中showModalDialog 的使用解析，需要的朋友可以參考一下

基本介紹：

window.showModalDialog() 方法用來創(chuàng)建一個顯示HTML內容的模態(tài)對話框。(就是打開后不能操作父窗口,只能等模式　　　　窗口關閉時才能操作)

window.showModelessDialog() 方法用來創(chuàng)建一個顯示HTML內容的非模態(tài)對話框。(就是打開后仍然可以進行其他的操作)　　　

使用方法：

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>
最終結果：