DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS中showModalDialog 的使用解析
JS中showModalDialog 的使用解析
編輯:關於JavaScript     

基本介紹:         

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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved