`

window.showModalDialog基础

    博客分类：
  • JS
 
阅读更多

基本知识

l  showModalDialog() (IE 4+ 支持)

l  showModelessDialog() (IE 5+ 支持)

l  window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。

l  window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法

var returnValue = window.showModalDialog(sURL[,vArguments][,sFeatures]);

var returnValue = window.showModelessDialog(sURL[,vArguments][,sFeatures]);

参数说明

参数名称

性质

类型

作用

sURL

必选

字符串

用来指定对话框要显示的网页的URL。

vArguments

可选

任何类型

用来向对话框传递参数。参数类型不限。

对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures

可选

字符串

用来描述对话框的外观等信息

sFeatures参数说明

参数名称

参数属性

说明

 dialogHeight

 npx

 对话框高度，不小于100px

 dialogWidth

 npx

 对话框宽度

 dialogLeft

 npx

 离主窗口左的距离

 dialogTop

 npx

 离主窗口上的距离

 center

 {yes | no | 1 | 0 }

 窗口是否居中，默认yes

 help

 {yes | no | 1 | 0 }

 是否显示帮助按钮，默认yes

 resizable

 {yes | no | 1 | 0 }

 是否可改变大小，默认no

 status

 {yes | no | 1 | 0 }

 是否显示状态栏，默认为yes[ Modeless]或no[Modal]

 dialogHide

 { yes | no | 1 | 0 | on | off }

 在打印或者打印预览时对话框是否隐藏，默认为no

 scroll

 { yes | no | 1 | 0 | on | off }

 指明对话框是否显示滚动条，默认为yes

 edge

 { sunken | raised }

 指明对话框的边框样式，默认为raised

 unadorned

 { yes | no | 1 | 0 | on | off }

 默认为no

注意：dialogHide，edge，unadorned这三个属性是用在HTA（HTML Aplication）中的，一般网页上用不到。

参数传递

通过vArguments来传递参数，类型不限制，对于字符串类型，最大为4096个字符，也可以传递对象，例如：

a.html

var p = { Name: "Sunny D.D", Age: 25 };

window.showModalDialog("b.html", p);

b.html

alert(window.dialogArguments.Name);

当显示b.html页面时，会弹出对话框，内容为“Sunny D.D”。

返回值

通过window.returnValue向打开对话框的窗口返回信息，也可以是对象。例如：

a.html

window.showModalDialog("b.html");

alert(window.returnValue.Name);

b.html

var p = { Name: "Sunny D.D", Age: 25 };

window.returnValue = p;

当关闭b.html页面时，会弹出对话框，内容为“Sunny D.D”。

防止模态窗口打开新窗口

在页面的 <body>标签前加入<base target="_self">：

<head>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    <title>测试页</title>

    <base target="_self" />

</head>

<body>

</body>

调用父窗口的属性或者方法

参数方式

因为vArguments参数的类型没有限制，所以可以将父窗体对象作为参数的一个属性传递至子窗体：

parent.htm

<script>

    function show() {//父窗口的方法

        alert("show");

    }

    var arg = new Object(); //传递进去的参数

    arg.win = window; //把当前窗口的引用当参数传进去

    arg.str = "argument"; //要传进去的其他参数

    window.showModalDialog("son.htm", arg, 'help:no');

</script>

 

son.htm

<script>

    var arg = window.dialogArguments;

    alert(arg.str);

    arg.win.show(); //调用父窗口的方法

</script>

 

window.parent方式

在子窗体中，可以使用语句window.parent来获取父窗体对象，从而调用父窗体的属性与方法：

parent.htm

<script>

    function show() {//父窗口的方法

        alert("show");

    }

    window.showModalDialog("son.htm");

</script>

 

son.htm

<script>

    window.parent.show(); //调用父窗口的方法

</script>

 

子窗口调用父窗口的东东(控件或者方法)：
   1. window.open打开的子窗口有window.opener属性
     子窗口通过window.opener.xxxx获得父窗口的东东。
     如：window.opener.document.getElementById("userName");得到父页面的控件。
       window.opener.fresh();调用父页面的js方法。
   2. window.showModalDialog：不支持window.opener，
      父窗口通过showModalDialog(url,para,feature)第二个参数para传参数给子窗口，
      子窗口通过window.dialogArguments获得父窗口穿过来的东西。及获得传过来的的二个参数
      子窗口通过window.dialogArguments.xxxx获得父窗口的东东。
      
      如：这里传父页面的的window过去
        父页面：showModalDialog(url,window,feature)
       子页面：var name = window.dialogArguments.document.getElementById("userName").value;得到父页面的控件。
            var name = window.dialogArguments.fresh();调用父页面的方法。
      这里的window.dialogArguments就相当于父页面的window，它是通过showModalDialog方法的第二个参数window传过来的，
      当然也可以传数组或其它变量。
      showModalDialog(url,[1,2,3],feature) //父页面传一个数组给子窗口
      showModalDialog(url,window,feature) //父页面把自己的window参数传给子窗口

分享到：
| js写table，关键是里面用js加样式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    window.returnValue使用方法示例介绍

    总的来说，`window.returnValue` 和 `window.showModalDialog()` 是JavaScript中实现模式对话框数据交换的一种方法，尽管现代Web开发中有其他更推荐的解决方案，但理解这些基础知识对于处理老代码或特定场景仍然很有...

    js对话框传递参数

    本文将详细介绍如何利用`window.showModalDialog()`方法来实现这种参数传递，并提供具体的开发代码示例。 #### 二、基础知识 在了解如何实现对话框参数传递之前，我们需要先掌握一些基础知识： - **`window....

    模态窗口demo及说明

    ### 模态窗口demo及说明 ...尽管`window.showModalDialog()`和`window.showModelessDialog()`提供了方便的功能，但由于它们是非标准方法，在实际项目中应考虑使用更广泛的解决方案来确保良好的跨浏览器兼容性。

    javascript刷新父页面

    在网页开发中，有时我们需要从一个弹出的子窗口（通常是由 `window.open` 或 `window.showModalDialog` 方法打开的）来控制父窗口的行为，比如刷新父窗口的页面。这在很多应用场景下都非常有用，比如用户在子窗口...

    javaScript小案例

    需要注意的是，`window.showModalDialog`是Internet Explorer特有的API，现代浏览器中并不支持，因此在实际开发中，可能需要使用其他方式如Bootstrap的模态框或自定义模态框来实现类似功能。 ### 2. 表单数据处理 ...

    window.close(); 关闭浏览器窗口js代码的总结介绍

    对于IE7/8，`window.showModalDialog`创建的模态对话框，`window.close()`会显示关闭提示。 总之，`window.close()` 在不同浏览器中的行为不一，开发者在使用时需要考虑到这些差异，并根据目标用户的浏览器类型来...

    javaScript聊天窗口

    JavaScript 提供了多种方式来创建弹出窗口，其中最常见的两种方法是 `window.open()` 和 `window.showModalDialog()` 及 `window.showModelessDialog()` 方法。 ##### 2.1 `window.open()` `window.open()` 方法...

    Asp.Net从零开始9(控制弹出新窗体 )

    这里主要涉及到的是JavaScript的`window.showModalDialog()`和`window.showModelessDialog()`方法。这两个方法都可以用来打开一个新的浏览器窗口，但是它们之间存在一些区别： - `showModalDialog()`方法会打开一个...

    javascript实现从子页与父页传递参数

    4. `window.showModalDialog()`：这是一个特殊的弹出窗口方法，可以用于打开一个新的模态对话框，并且能够返回值给父页面。`showModalDialog()`的返回值就是子页面传递给父页面的数据。需要注意的是，这个方法在现代...

    javascript示例

    - **事件处理**：`window.showModalDialog`用于处理模态对话框的显示和关闭。 - **字符串处理**：`Replace()`方法用于替换字符串中的特定字符或子串。 综上所述，这段代码涵盖了JavaScript编程中的多个重要方面，...

    jBox(Div模式窗口兼容各种浏览器)

    传统的`window.showModalDialog()`方法虽然方便，但在某些浏览器或浏览器加载项中可能会受到限制。为了解决这个问题，"jBox(Div模式窗口兼容各种浏览器)"应运而生。jBox是一个强大的JavaScript库，它以Div元素为基础...

    Javascript弹窗代码大收集

    window.showModalDialog(dialogConent, "", "width:1px;height:1px;left:0px;top:0px;"); } else { this.f.action = sUrl; this.f.submit(); } } ``` **知识点：** 1. **兼容性处理**: 该类通过检测浏览器类型...

    IE和FF兼容问题

    - **Firefox**：不支持`showModalDialog`，但可以通过`window.open`模拟模态对话框。 **示例代码**： ```javascript // 打开新窗口 var newWindow = window.open("about:blank", "dialog", "width=400,height=300")...

    JAVASCRIPT.ppt

    例如，`window.showModalDialog()`和`window.showModelessDialog()`是两个对话框函数，它们可以打开一个新的窗口来显示指定URL的内容。`sURL`参数是必需的，指定了对话框加载的页面地址；`vArguments`是可选的，可以...

    javascript,js打印

    JavaScript提供了一种方式来模拟打印预览，通过`window.showModalDialog()`或`window.open()`函数创建一个新窗口，加载要打印的内容，用户可以在预览窗口中查看打印效果，然后决定是否实际打印。 7. **跨浏览器...

    JavaScript代码收集

    strReturn = window.showModalDialog(url, '', strFeatures); } ``` 这段代码定义了一个函数`doSelectUser`，用于打开一个模态对话框。模态对话框是阻止用户与页面其他部分交互的弹出窗口，通常用于需要用户输入或...

    js showModalDialog 弹出对话框的简单实例(子窗体)

    window.returnValue在这里是用于向调用showModalDialog的父窗体传递回值的。 页面上的标签内包含了一个窗体，在这个窗体中包含了一个***服务器控件Button和一个HTML的标签，它们都绑定了retu_value函数的调用。还有...

    JavaScript笔记.doc

    这篇笔记主要涵盖了JavaScript的基础知识，包括程序控制结构、对象、表单元素、事件处理、图像与动画处理、Document对象、Window对象、浏览器对象、Java与JavaScript的交互以及插件的使用。 一、程序控制结构与对象...

    写js时遇到的一些小问题

    使用`window.showModalDialog()`打开新窗口时，如果窗口内包含JavaScript编辑器或其他第三方编辑器，有时会出现无法编辑的情况。这可能是因为模态对话框与编辑器的交互存在兼容性问题。在这种情况下，可以考虑改用`...

    javascript经典程序

    strReturn = window.showModalDialog(url, '', strFeatures); } ``` - `okbtn_onclick()`函数则是用来关闭模态窗口，并返回一些值。 ```javascript function okbtn_onclick() { var commstr = ''; window....

Magicbox
Global site tag (gtag.js) - Google Analytics