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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
原生JS生成指定位数的验证码
Oct 28 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
利用python实现数据分析
2017/01/11 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Python如何用filter函数筛选数据
2020/03/05 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
医院实习介绍信
2014/01/12 职场文书
八一建军节活动方案
2014/02/10 职场文书
药店促销活动策划方案
2014/08/24 职场文书
新兵入伍心得体会
2014/09/04 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
关于分班的感言
2015/08/04 职场文书
大学生志愿者心得体会
2016/01/15 职场文书