`

window.showModalDialog介绍

阅读更多

window.showModalDialog的用法

基本介绍:
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
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.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

 


1.参数可以传递任何对象

 

要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
<script>
var obj = window.dialogArguments
alert("您传递的参数为:" + obj.name)
</script>

 
2.通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。

 

例如:

<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>



<script>
window.returnValue="http://www.51js.com";
</script>

 

3、模态(modal)和非模态(modeless)的区别

 

所谓模态对话框,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话 框。非模态对话框则不会强制此种特性,用户可以在当前对话框以及其他窗口间进行切换。

 

本文介绍如何使用JavaScript语言来创建这两种类型的对话 框、控制其大小和位置、改变其外观以及在对话框间的数据传递。

本文的所有例程中,从层次上涉及到2个HTML页面。我们把第一个页面叫做caller页面,第二个页面叫做callee页面。也就是说,在caller页面执行代码创建生成callee页面。


创建模态和非模态对话框
首先,我们举个例子来快速了解一下什么是模态与非模态。在caller.htm中,我们输入以下代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <script language="javascript"> 
function fnOpenModal(){ 
window.showModalDialog("callee.htm") 
} 
function fnOpenModeless(){ 
window.showModelessDialog("callee.htm") 
} 
</script> 
 </HEAD>

 <BODY>
  <INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()"> 
<br><br> 
<INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()"> 

 </BODY>
</HTML>

 
在 浏览器中打开caller.htm,点击“创建模态对话框”按钮,将会出现一个对话框窗口,其中的内容是callee.htm。你会看到,除了关闭这个新 窗口,无论怎样我们也不能将其他的窗口设置为“当前活动”窗口,这个一直是活动状态的窗口类型就是模态类型。关闭这个模态对话框,回到 caller.htm页面,点击“创建非模态对话框”,出现一个包含callee.htm页面的对话框窗口。这回有所不同,鼠标可以转移到其他地方使另外 的窗口成为“当前活动”状态,这就是非模态的概念。 


4、控制对话框大小和位置

 


控 制对话框的大小和位置涉及到5个方面:高度(dialogHeight)、宽度(dialogWidth)、相对于桌面左上角的x坐标 (dialogLeft)、y坐标(dialogTop)以及是否让对话框窗口居中(center)。由于不同版本的Internet Explorer浏览器处理的默认度量单位并非一致,所以我们在指定高度、宽度等大小时,最好是同时设置好单位。单位种类包括很多,比如cm、mm、 in、pt、pc、px。请注意:最小的高度值是100px。
下面的代码将打开一个高200px、宽800px的对话框:
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px');
我们注意到,打开的新窗口会在桌面中处于居中的位置,这也正是居中属性(center)的默认值。居中属性(center)的可取值包括yes、no、1、0、on和off,含义一目了然。执行以下代码,看看关闭居中属性后新窗口的位置:
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;center:no');
我们看到,新窗口紧挨者桌面的左上角打开。当然,我们可以使用dialogLeft和dialogTop 属性来精确定义新窗口的打开位置。下面的代码将在相对于桌面左上角的x位置300px和y位置500px处打开新窗口:
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;
dialogTop:500')
注意,即使指定了居中属性,但如果同时设置了dialogLeft和dialogTop属性值,那么窗口位置将遵从后者。试一试执行下面的代码:
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;
dialogTop:500;center:yes')

 


5、改变对话框外观


对 话框的外观控制包括从窗口边缘风格(edge)、是否存在滚动条(scroll)、是否包含上下文关联提示图标(help)、是否显示状态栏 (status)以及是否可以改变窗口大小(resizable)等方面。默认情况下,新打开的窗口是大小不可改变的、边缘风格为凸起、在新窗口右上角显 示一个上下文关联提示图标、存在滚动条,比如:
 
 
edge的可取值为sunken(凹陷)和raised(凸起),status、help、resizeable和scroll的可取值都是yes、no、1、0、on和off,其含义一目了然。
下面的代码将去除上下文关联提示图标、不显示状态栏、窗口边缘风格为凹陷:
showModelessDialog("callee.htm","","status:0;help:0;edge:sunken"); 

 
6、实例


上面我们介绍了创建模态和非模态窗口的语法以及如何控制新窗口的大小、位置和外观,接下来我们研究一下实际应用中更实用的功能:如何从caller页面传递数据到callee页面。
从caller页面传递给callee页面的数据分为3类:传递值、传递数组引用以及传递对象,它们都是通过showModalDialog()和showModelessDialog()的第2个参数实现的。
(一)传递值类型数据
在caller.htm页面中输入以下代码:

<INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()"> 
<br><br> 
<INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()"> 
<script language="javascript"> 
<!-- 
function fnOpenModal(){ 
window.showModalDialog("callee.htm","打开了一个新模态窗口") 
} 
function fnOpenModeless(){ 
window.showModelessDialog("callee.htm","打开了一个新非模态窗口") 
} 
// --> 
</script> 
在callee.htm页面中输入以下代码: 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
alert(dialogArguments); 
// --> 
</SCRIPT> 

 在浏览器中打开caller.htm,点击任意一个按钮,我们将首先看到如下的提示信息框:
 
 
 
然后才出现新窗口。这种情况下,callee.htm页面中的window对象的属性dialogArguments将对应于caller.htm页面中的"打开了一个新模态窗口"或者"打开了一个新非模态窗口"。如果直接打开callee.htm,将会出现错误提示。
(二)传递数组引用类型数据
第一种值类型数据的传递中,在callee.htm页面中只能读取caller.htm页面的传递数据。当需要对caller.htm页面的传递内容进行修改时,就需使用到数组引用类型的传递方式。
首先,在caller.htm页面中输入以下代码:

<INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()"> 
<br><br> 
<INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()"> 
<script language="javascript"> 
<!-- 
var a = new Array; 
a[0]="first"; 
a[1]="second"; 
a[2]="third"; 
function fnOpenModal(){ 
window.showModalDialog("callee.htm",a) 
} 
function fnOpenModeless(){ 
window.showModelessDialog("callee.htm",a) 
} 
// --> 
</script> 
然后在callee.htm页面中输入以下代码: 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
a = dialogArguments; 
alert(a); 
a[0] = "fourth"; 
// --> 
</SCRIPT> 

 
最后,在浏览器中打开caller.htm,点击任意一个按钮,我们将首先看到如下的对话框:
 
 
接着关闭这个对话框以及新打开的窗口,再次点击一个按钮,又出现一个对话框:
 
 
从运行结果我们看到,在caller.htm页面中通过对数组a的地址引用,就可以实现在callee.htm中修改数组a的内容。
注意在callee.htm中要首先建立对传递数据的附值:a = dialogArguments。
(三)传递对象类型数据
在caller.htm 和callee.htm中传递数据的最有效方式是通过对象方式进行,这不仅能实现从caller.htm到callee.htm的传递,还能从 callee.htm传递到caller.htm。而且,我们还可以在caller.htm中定义对象的方法,再在callee.htm中使用它们。实际 上,我们可以将caller.htm的window对象传递给callee.htm,这样就可以在callee.htm中访问caller.htm的变量 及函数。
来看看一个实际的例子。在caller.htm中输入以下代码:

<HTML> 
<HEAD> 
<TITLE>传递对象数据</TITLE> 
<SCRIPT> 
var sColor="";  
function callDialog() { 
showModelessDialog("callee.html",window,"status:false;dialogWidth:300px;dialogHeight:150px"); 
} 
function update() 
{ 
oColor.innerText = sColor; 
} 
</SCRIPT> 
</HEAD> 
<BODY> 
<P>输入你最喜欢的颜色: <SPAN ID="oColor" STYLE="color:red;font-size:24">Yellow</SPAN></P>  
<INPUT TYPE="button" VALUE="Display Modeless Dialog" onclick="callDialog()"> 
</BODY> 
</HTML> 
在callee.htm中输入以下代码: 
<HTML> 
<HEAD> 
<TITLE>callee.html</TITLE> 
<SCRIPT> 
function getInfoAndUpdate() { 
var callerWindowObj = dialogArguments; 
callerWindowObj.sColor = oEnterColor.value; 
callerWindowObj.update(); 
} 
function cancel() { 
var callerWindowObj = dialogArguments; 
callerWindowObj.sColor = "Yellow"; 
callerWindowObj.update();  
} 
</SCRIPT> 
</HEAD> 
<BODY> 
输入你最喜欢的颜色:<INPUT ID=oEnterColor><BR><BR> 
<INPUT VALUE="Apply" TYPE=button onclick="getInfoAndUpdate();"> 
<INPUT VALUE="Ok" TYPE=button onclick="getInfoAndUpdate();window.close();"> 
<INPUT VALUE="Cancel" TYPE=button onclick="cancel();window.close();"> 
</BODY> 
</HTML>  

 
在浏览器中打开caller.htm,点击“显示非模态对话框”按钮,出现新对话框:
 
 
在对话框中输入其他颜色名称,点击“Apply”按钮后,执行callee.htm中的getInfoAndUpdate函数:

function getInfoAndUpdate() { 
var callerWindowObj = dialogArguments; 
callerWindowObj.sColor = oEnterColor.value; 
callerWindowObj.update(); 
} 

 
因 为在caller.htm中传递给callee.htm的是对象类型数据window,所以经过第一条语句的附值,callerWindowObj就指向 了caller.htm页面,然后就可以在callee.htm中按照callerWindowObj.xxx的形式引用caller.htm中的变量及 函数:callerWindowObj.sColor = oEnterColor.value负责将callee.htm中输入的颜色名称传递给caller.htm中的变量sColor,然后再执行 caller.htm中的 update()函数更新显示信息。
可以看到,通过对象方式传递数据,功能很丰富强大,而且使用起来也不复杂。 

 

分享到:
评论

相关推荐

    window.showModalDialog模式对话框和 window.open的区别

    `window.showModalDialog` 和 `window.open` 都是JavaScript提供的两种打开新窗口的方法,但它们在功能和使用场景上有着显著的区别。 首先,我们来详细探讨`window.showModalDialog`。`showModalDialog`方法用于...

    window.showModalDialog以及window.open用法简介

    Window.showModalDialog 和 Window.open 都是 JavaScript 中的方法,用于创建新窗口或对话框,下面分别介绍它们的用法和参数。 一、Window.open() 方法 Window.open() 方法用于打开一个新的浏览器窗口,可以指定新...

    解决window.showModalDialog跨域返回值

    在JavaScript中,`window.showModalDialog`是一个古老但仍然有用的函数,用于打开一个模态对话框,用户在对话框中进行交互,直到关闭对话框为止。然而,当涉及到跨域时,`showModalDialog`面临一个问题:它无法正确...

    Window.ShowModalDialog使用手册

    在JavaScript编程语言中,`Window.showModalDialog()`方法是一个非常重要的功能,主要用于打开一个模态对话框,即用户必须关闭对话框才能与父窗口进行交互。这个方法在创建用户交互和自定义弹出窗口场景中非常有用。...

    针对window.showmodaldialog弹出窗体无刷新的详细使用

    本文将详细介绍`window.showModalDialog`的使用方法及其相关知识点。 1. **基本语法** `window.showModalDialog` 的基本调用形式如下: ```javascript var returnValue = window.showModalDialog(url, window, ...

    JS 弹出对话框window.showModalDialog()

    ### JS弹出对话框 `window.showModalDialog()` 的使用与详解 #### 一、`window.showModalDialog()` 概述 在JavaScript中,`window.showModalDialog()` 是一个非标准但广泛使用的API,用于创建模态对话框。模态...

    google不支持window.showModalDialog问题解决方案

    This is a `window.showModalDialog()` shim using a modal HTML5 `&lt;dialog&gt;` element and ECMAScript 6 Generators. It was tested in the latest Google Chrome with the *Enable Experimental JavaScript* flag ...

    window.showModalDialog(javascript)

    本文将重点介绍模态对话框的使用方法`window.showModalDialog()`。 模态对话框是一种阻止用户与网页其他部分互动,直到关闭对话框为止的交互方式。`window.showModalDialog()`是Internet Explorer 4及更高版本支持...

    window.showModalDialog方法的使用

    在JavaScript编程中,`window.showModalDialog`是一个用于打开模态对话框的函数,它能够创建一个新的浏览器窗口或者在当前窗口内显示一个弹出层,阻止用户与父窗口的交互,直到用户关闭对话框为止。这个方法在创建...

    父子窗口传值window.showModalDialog以及window.open用法简介

    window.showModalDialog以及window.open用法简介

    window.showModalDialog的基本用法

    ### window.showModalDialog 的基本用法 `window.showModalDialog` 是一个早期的浏览器功能,主要在 Internet Explorer(IE)4.0 及以上版本中支持。它用于打开一个新的模态对话框窗口,并且该窗口将阻止用户与主...

    关于struts2里用javascript刷新window.showModalDialog的父页面

    ### 关于Struts2中利用JavaScript刷新window.showModalDialog的父页面 在Web开发中,尤其是在使用Struts2框架进行项目开发时,我们经常会遇到需要弹出模态对话框(modal dialog)的需求。其中一个常见的场景就是...

    window.showModalDialog打开跨域的页面并取到返回值

    主页面用window.showModalDialog的时候,如果直接打开其它系统的页面,这时候别人的页面在window.returnValue=1;这样返回值的时候,主页面是取不到返回值的,原因就是因为跨域了.

    window.showModalDialog的一个domo模型

    `window.showModalDialog` 是一个在JavaScript中用于打开模态对话框的函数,它在Web开发中被广泛使用,特别是在创建自定义对话框时。在这个示例中,我们有一个名为"TestWindowDialog"的压缩包文件,其中包含了实现`...

    ShowModalDialog与window.open的区别

    ### ShowModalDialog与window.open的区别 #### 一、概述 在Web开发中,有时需要创建新的浏览器窗口或对话框来实现特定功能,如显示警告、输入数据等交互操作。JavaScript 提供了两种常用的方法来创建这类窗口:`...

    window.showModalDialog('d.html',fault,'');

    描述中的链接指向了博客文章,虽然具体内容未给出,但可以推测文章可能详细介绍了 `showModalDialog` 的使用、优缺点以及替代方案,因为这个函数在现代 Web 开发中已逐渐被弃用,主要原因包括不兼容性(尤其是在某些...

Global site tag (gtag.js) - Google Analytics