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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
原生js调用json方法总结
2018/02/22 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python中的json总结
2018/10/11 Python
python绘制简单彩虹图
2018/11/19 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
辞职书格式样本
2015/02/26 职场文书
活动宣传稿范文
2015/07/23 职场文书
php去除deprecated的实例方法
2021/11/17 PHP