JS中showModalDialog 的使用解析


Posted in Javascript onApril 17, 2013

基本介绍:         

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>
Javascript 相关文章推荐
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
js中settimeout方法加参数
Feb 28 Javascript
JScript中的条件注释详解
Apr 24 Javascript
Javascript动画效果(3)
Oct 11 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
简单了解JavaScript异步
May 23 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 #Javascript
中文字符串截取的js函数代码
Apr 17 #Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 #Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 #Javascript
js读写(删除)Cookie实例详解
Apr 17 #Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 #Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 #Javascript
You might like
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
xmlHTTP实例
2006/10/24 Javascript
JS获取父节点方法
2009/08/20 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python实现数据写入excel表格
2018/03/25 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
tensorflow 实现数据类型转换
2020/02/17 Python
python Canny边缘检测算法的实现
2020/04/24 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
优秀应届生推荐信
2013/11/09 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书