zoukankan      html  css  js  c++  java
  • window.showModalDialog()用法

    1.定义

    window.showModalDialog()用来创建模态对话框

    语法为:vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]);

    参数:

    (1)sURL :指定对话框要显示的文档的URL,字符串,必填

    (2)vArguments:要向对话框传递的参数,变体(数组、变量等),选填

    (3)sFeatures:生成对话框的外观信息,字符串,选填

    参数 含义 说明
    dialogHeight 对话框高度 不小于100px
    dialogWidth 对话框宽度
    dialogLeft 离屏幕左的距离
    dialogTop 离屏幕上的距离
    center 是否居中 默认yes(yes:1,no:0)
    help 是否显示帮助按钮 默认yes
    resizable 是否可被改变大小 默认no
    status 是否显示状态栏 Modal默认no,Modeless默认yes
    scroll 是否显示滚动条 默认为yes

    注意:

    window.showModalDialog()只能在IE浏览器中使用,如果是chrome或者火狐浏览器,可以使用window.open()方法,window.open()的具体用法参考https://www.cnblogs.com/wugongzi/p/13438578.html这篇博文。

    区别:

    window.showModalDialog()和window.open()都可以打开页面,两者之间有什么区别?

    用window.showModalDialog()打开窗口,只有等打开的窗口关闭后,才会执行后面的js代码(同步);而window.open()打开窗口的同时就会继续往下执行代码(异步),所以如果你想等获取到子页面的值以后在去执行方法,建议使用showModalDialog()方法

    2.用法

    现在我们一起来看一下showModalDialog具体该如何使用

    我们新建两个页面,放在同一个文件夹下面,名称分别为parent.html和child.html,分别代表父页面和子页面。在父页面中打开子页面窗口,并传递参数。子页面收到父页面传递过来的参数后进行输出,同时当子页面关闭时将返回值传递给父页面。父页面获取到返回值后进行输出。

    parent.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>父页面——showModalDialog用法</title>
    </head>
    <body>
        <div>
            <button onclick="showDialog()">打开新窗口</button>
        </div>
        <script>
            function showDialog() {
                var message = "我是父页面的数据123";
                var obj = window.showModalDialog("child.html", message, 'dialogWidth:300px;dialogHeight:380px;');
                alert("返回的数据"+obj);
            }
        </script>
    </body>
    </html>
    

    child.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button onclick="getMessage()">获取父页面传递过来的数据</button>
        <script>
            function getMessage() {
                var message = window.dialogArguments;
                alert(message);
                window.returnValue="我是返回的数据abc";
            }
        </script>
    </body>
    </html>
    
  • 相关阅读:
    Java 到底是值传递还是引用传递
    Java.lang.Comparable接口和Java.util.Comparator接口的区别
    线程安全和线程不安全的区别
    剑指offer第五天
    快速排序法
    剑指offer第四天
    length()方法,length属性和size()的方法的区别
    linux 下创建管理员权限账户
    Centos6.5 rpm方式指定目录安装JDK
    阿里云云服务器硬盘分区及挂载
  • 原文地址:https://www.cnblogs.com/wugongzi/p/13438800.html
Copyright © 2011-2022 走看看