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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
js实现小星星游戏
Mar 23 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 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数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
用js编写留言板
2020/03/17 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
python装饰器代替set get方法实例
2019/12/19 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
解除劳动合同协议书范本
2014/04/14 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
2014年党小组工作总结
2014/12/20 职场文书
详解Django的MVT设计模式
2021/04/29 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis