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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
vue内置指令详解
Apr 03 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 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中大括号作用介绍
2012/03/22 PHP
php object转数组示例
2014/01/15 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
React组件的三种写法总结
2017/01/12 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
利用Python爬取可用的代理IP
2016/08/18 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
python计算日期之间的放假日期
2018/06/05 Python
python3实现磁盘空间监控
2018/06/21 Python
python如何实现视频转代码视频
2019/06/17 Python
使用python求解二次规划的问题
2020/02/29 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
企业总经理职责
2014/02/02 职场文书
小学毕业感言150字
2014/02/05 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python