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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
webpack构建换肤功能的思路详解
Nov 27 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python 解析XML文件
2009/04/15 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python实现人脸签到系统
2020/04/13 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
开门红主持词
2014/04/02 职场文书
老公保证书范文
2014/04/29 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
网络营销计划
2015/01/17 职场文书
聘任证明怎么写
2015/03/02 职场文书
党员发展大会主持词
2015/07/03 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL