`
robinrain
  • 浏览: 59869 次
  • 性别: Icon_minigender_1
  • 来自: 威海
社区版块
存档分类
最新评论

window.showModalDialog详解

 
阅读更多

 

基本介绍：
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法：

Java代码   收藏代码
  1. vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])  
  2. vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])  

 

参数说明：
sURL--
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments--
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
1.dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是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 } ［ＩＥ５＋］：是否可被改变大小。默认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个字符。也可以传递对象，例如：

Js代码   收藏代码
  1. <script>  
  2. var obj = new Object();  
  3. obj.name="51js";  
  4. window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");  
  5. </script>  
Js代码   收藏代码
  1. <script>  
  2. var obj = window.dialogArguments  
  3. alert("您传递的参数为：" + obj.name)  
  4. </script>  

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

 

例如：

Js代码   收藏代码
  1. <script>  
  2. str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");  
  3. alert(str);  
  4. </script>  
  5.   
  6.   
  7.   
  8. <script>  
  9. window.returnValue="http://www.51js.com";  
  10. </script>  

 

3、模态（modal）和非模态（modeless）的区别

 

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

 

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

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


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

Html代码   收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <script language="javascript">   
  5. function fnOpenModal(){   
  6. window.showModalDialog("callee.htm")   
  7. }   
  8. function fnOpenModeless(){   
  9. window.showModelessDialog("callee.htm")   
  10. }   
  11. </script>   
  12.  </HEAD>  
  13.   
  14.  <BODY>  
  15.   <INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()">   
  16. <br><br>   
  17. <INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()">   
  18.   
  19.  </BODY>  
  20. </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页面中输入以下代码：

Html代码   收藏代码
  1. <INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()">   
  2. <br><br>   
  3. <INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()">   
  4. <script language="javascript">   
  5. <!--   
  6. function fnOpenModal(){   
  7. window.showModalDialog("callee.htm","打开了一个新模态窗口")   
  8. }   
  9. function fnOpenModeless(){   
  10. window.showModelessDialog("callee.htm","打开了一个新非模态窗口")   
  11. }   
  12. // -->   
  13. </script>   
  14. 在callee.htm页面中输入以下代码：   
  15. <SCRIPT LANGUAGE="JavaScript">   
  16. <!--   
  17. alert(dialogArguments);   
  18. // -->   
  19. </SCRIPT>   

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

Java代码   收藏代码
  1. <INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()">   
  2. <br><br>   
  3. <INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()">   
  4. <script language="javascript">   
  5. <!--   
  6. var a = new Array;   
  7. a[0]="first";   
  8. a[1]="second";   
  9. a[2]="third";   
  10. function fnOpenModal(){   
  11. window.showModalDialog("callee.htm",a)   
  12. }   
  13. function fnOpenModeless(){   
  14. window.showModelessDialog("callee.htm",a)   
  15. }   
  16. // -->   
  17. </script>   
  18. 然后在callee.htm页面中输入以下代码：   
  19. <SCRIPT LANGUAGE="JavaScript">   
  20. <!--   
  21. a = dialogArguments;   
  22. alert(a);   
  23. a[0] = "fourth";   
  24. // -->   
  25. </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代码   收藏代码
  1. <HTML>   
  2. <HEAD>   
  3. <TITLE>传递对象数据</TITLE>   
  4. <SCRIPT>   
  5. var sColor="";    
  6. function callDialog() {   
  7. showModelessDialog("callee.html",window,"status:false;dialogWidth:300px;dialogHeight:150px");   
  8. }   
  9. function update()   
  10. {   
  11. oColor.innerText = sColor;   
  12. }   
  13. </SCRIPT>   
  14. </HEAD>   
  15. <BODY>   
  16. <P>输入你最喜欢的颜色: <SPAN ID="oColor" STYLE="color:red;font-size:24">Yellow</SPAN></P>    
  17. <INPUT TYPE="button" VALUE="Display Modeless Dialog" onclick="callDialog()">   
  18. </BODY>   
  19. </HTML>   
  20. 在callee.htm中输入以下代码：   
  21. <HTML>   
  22. <HEAD>   
  23. <TITLE>callee.html</TITLE>   
  24. <SCRIPT>   
  25. function getInfoAndUpdate() {   
  26. var callerWindowObj = dialogArguments;   
  27. callerWindowObj.sColor = oEnterColor.value;   
  28. callerWindowObj.update();   
  29. }   
  30. function cancel() {   
  31. var callerWindowObj = dialogArguments;   
  32. callerWindowObj.sColor = "Yellow";   
  33. callerWindowObj.update();    
  34. }   
  35. </SCRIPT>   
  36. </HEAD>   
  37. <BODY>   
  38. 输入你最喜欢的颜色:<INPUT ID=oEnterColor><BR><BR>   
  39. <INPUT VALUE="Apply" TYPE=button onclick="getInfoAndUpdate();">   
  40. <INPUT VALUE="Ok" TYPE=button onclick="getInfoAndUpdate();window.close();">   
  41. <INPUT VALUE="Cancel" TYPE=button onclick="cancel();window.close();">   
  42. </BODY>   
  43. </HTML>    

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

Js代码   收藏代码
  1. function getInfoAndUpdate() {   
  2. var callerWindowObj = dialogArguments;   
  3. callerWindowObj.sColor = oEnterColor.value;   
  4. callerWindowObj.update();   
  5. }   

 
因 为在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()函数更新显示信息。 
可以看到，通过对象方式传递数据，功能很丰富强大，而且使用起来也不复杂。

分享到：
| js数字转字符串 字符串转数字
评论
发表评论

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

相关推荐

    JS 弹出对话框window.showModalDialog（）

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

    window.showModalDialog(javascript)

    【window.showModalDialog() 方法详解】 在Web开发中，JavaScript提供了两种对话框方式来与用户交互，即模态对话框和非模态对话框。本文将重点介绍模态对话框的使用方法`window.showModalDialog()`。 模态对话框是...

    window.showModalDialog的基本用法

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

    Window.ShowModalDialog使用手册

    ### 使用Window.ShowModalDialog与Window.ShowModelessDialog在JavaScript中的详解 #### 一、引言 在Web开发中，为了实现更加丰富的用户交互体验，开发者经常需要创建模态或非模态对话框来显示特定的信息或者请求...

    ShowModalDialog与window.open的区别

    #### 二、ShowModalDialog详解 **1. 功能介绍** `ShowModalDialog` 是一个非标准但广泛使用的函数，用于打开模态对话框。模态对话框是指打开后会阻止用户与主页面进行任何交互的窗口，直到该对话框被关闭为止。 *...

    JavaScript中window.showModalDialog()用法详解

    - 当子窗口关闭时，其window.returnValue的值会被设置为父窗口中window.showModalDialog()方法调用的返回值。 - 在IE浏览器中，window.showModalDialog()方法支持得比较好，但在其它一些浏览器中可能不完全支持，...

    Window.ShowModalDialog使用手册_对话框 .txt

    ### Window.ShowModalDialog 使用手册详解 #### 一、概述 `Window.ShowModalDialog` 是一个在 Internet Explorer 浏览器中特有的方法，用于创建模态对话框。此方法允许开发者在一个新的窗口中打开一个HTML页面，...

    Window.showDialog详解合集

    var result = window.showModalDialog("dialogPage.jsp", window, "dialogWidth:500px;dialogHeight:400px;center:yes;status:no"); ``` 在这个例子中，`dialogPage.jsp`是弹出的对话框页面，`window`表示对话框的...

    window.showModalDialog使用手册

    **Window.showModalDialog 使用手册** `window.showModalDialog` 是Internet Explorer 4+ 版本开始支持的一个方法，用于创建一个模态对话框，显示HTML内容。模态对话框意味着用户必须关闭对话框才能继续与主窗口...

    showModalDialog模态对话框的使用详解以及浏览器兼容

    `showModalDialog`是JavaScript中`window`对象的一个方法，用于打开一个模态对话框，即新打开的窗口会阻止用户与父窗口的交互，直到该对话框被关闭。这与`window.open`方法不同，后者打开的新窗口并不会阻止用户在父...

    showModalDialog参数使用详解

    例如，在子窗口中设置`window.returnValue`，然后在父窗口中通过`window.showModalDialog`的返回值来访问。 ```javascript // 子窗口设置返回值 window.returnValue = '用户输入的数据'; // 父窗口获取返回值 var ...

    html 模态窗口使用

    尽管`window.showModalDialog()`和`window.showModelessDialog()`为IE提供了一种创建模态和非模态对话框的简便方法，但考虑到IE的市场份额不断下降以及对现代Web标准的支持不足，开发者应考虑使用更广泛的跨浏览器...

    常用javascript整理

    .txt 2.JavaScript的系统函数学习 .txt 3.js中用于对象的语句——with和for...in语句学习专题.txt 4.smallSoftkey小软键盘，大键盘 5.window.open参数详解 .txt 6.Window.ShowModalDialog使用详解 ...

    showModalDialog参数详解

    showModalDialog参数详解 基本介绍： showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()...

    一个使用模式窗口的例子

    #### 三、`window.showModalDialog()`详解 `window.showModalDialog()`是一个非常实用的函数，它用于打开一个模式对话框，该对话框阻止用户与主窗口交互，直到对话框关闭为止。其基本语法如下： ```javascript var...

    javascript刷新父页面

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

    JS中showModalDialog关闭子窗口刷新主窗口用法详解

    网上找了好长时间 大都是window.opener.location.reload(),等等 都不是我想要的 最后终于发现了一个 想知道的就往下看看吧 showModalDialog和showModelessDialog 一、showModalDialog和showModelessDialog有什么不同...

    showModalDialog详解

    var returnVal = window.showModalDialog(url, startingValue, features); ``` 1. **url**：这是必需的参数，表示对话框将加载的URL。可以是相对路径或绝对路径，用于指定对话框显示的HTML页面。 2. **...

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