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:Div层拖动效果实例代码
Aug 06 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
node中的session的具体使用
Sep 14 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
jquery实现动态菜单的实例代码
2013/11/28 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
python 读取.nii格式图像实例
2020/07/01 Python
python 实现音频叠加的示例
2020/10/29 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
小学二年级评语
2014/04/21 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
付款承诺函范文
2015/01/21 职场文书
高三英语教学计划
2015/01/23 职场文书