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脚本实现Web页面信息交互
Dec 21 Javascript
使用户点击后退按钮使效三行代码
Jul 07 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
原生js的数组除重复简单实例
May 24 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[17:36]VG战队纪录片
2014/08/21 DOTA
JSON Web Tokens的实现原理
2017/04/02 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
市场营销个人求职信范文
2014/02/02 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
创业计划书之酒厂
2019/10/14 职场文书