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 随机展示头像实现代码
Dec 06 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
利用javaScript处理常用事件详解
Apr 14 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
超级简单的发送邮件程序
2006/10/09 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
Python进程池Pool应用实例分析
2019/11/27 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
.NET笔试题(20个问题)
2016/02/02 面试题
车辆转让协议书
2014/04/15 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
毕业论文致谢范文
2015/05/14 职场文书
值班管理制度范本
2015/08/06 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android