当前位置：首页 > 资讯 > 技术文档

JS中showModalDialog 的使用解析

时间：2022-04-22 04:59 编辑：来源：阅读：
扫一扫，手机访问

摘要：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

[u]复制代码[/u] 代码如下:

<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

[u]复制代码[/u] 代码如下:

<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

[u]复制代码[/u] 代码如下:

<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>

全部评论(0)

上一篇：JavaScript Alert通用美化类
下一篇：JS+CSS实现的经典tab选项卡效果代码

资讯排行榜
更多>>