JS中showModalDialog 的使用解析

140 阅读 0 评论 93 点赞

我是靠谱客的博主潇洒发卡，最近开发中收集的这篇文章主要介绍JS中showModalDialog 的使用解析，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

基本介绍：

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>
最终结果：