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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
js格式化时间的方法
Dec 18 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
写一个Vue Popup组件
Feb 25 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 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如何透过ODBC来存取数据库
2006/10/09 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python+opencv识别图片中的圆形
2020/03/25 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
自我鉴定思想方面
2013/10/07 职场文书
大学生优秀的自我评价分享
2013/10/22 职场文书
房地产广告词大全
2014/03/19 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android