`
haolianshuai
  • 浏览: 23238 次
社区版块
存档分类
最新评论

window.showModalDialog模态窗口会阻塞后面执行的js方法

    博客分类：
  • js
js 
阅读更多
window.showModalDialog只有在弹出的对话框被关闭之后才会执行alert(...); 
<html>
	<head>
		<title>测试window.open之后js方法阻塞</title>
		<script type="text/javascript">
			function test(){
				window.showModalDialog("open.html",this,'resizable:yes;scroll:yes;status:no;help:no;dialogWidth:400px;dialogHeight:250px;alwaysRaised:yes;');
				alert('我啥时候被执行的！ ');
			}
		</script>
	</head>
	<body>
		<input type="button" onclick="test()" value="点击我"/>
	</body>
</html>


javascript中showModalDialog和showModelessDialog区别

1．  showModalDialog和showModelessDialog的异同

  同：两者弹出的窗体不能刷新

  异：前者是模态窗口，始终获得焦点；后者是非模态窗口，只不过弹出一个页面，还可以操作父窗口。

2．  关闭showModalDialog和showModelessDialog弹出的窗口

    <INPUT type="button" value="ButtonClick" onclick="self.close();">

3．  怎样才让在showModalDialog和showModelessDialog的弹出新窗口里操作button,不弹出新窗口？

    在<head>和</head>之间加<base target="_self">

4.     showModalDialog的返回值

参照例子：

t1.html:

<script language="javascript">
function showpage()
{
alert(showModalDialog("t2.html"));
}
</script>
<input type="button" value="getval" onClick="showpage();">

t2.html
<HTML>
<HEAD>
<Script language="javascript">
<
function SetVal()
{
  returnValue="abc";
  close();
}
//-->
</Script>
</HEAD>
<BODY> 
<input type="button" value="Btn1" onClick="SetVal();">
</BODY>
</HTML>


基本介绍：
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 :对话框高度，不小于１００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 } [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="ttop";
window.showModalDialog("test.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
test.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为：" + obj.name)
</script>

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

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




一、showModalDialog和showModelessDialog有什么不同？
　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。
　　showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？
　　在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<html>和<body>之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容？
　　在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码：

<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>

　　将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合<base target="_self">使用，不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
　　<input type="button" value="关闭" onclick="window.close()">
　　也要配合<base target="_self">，不然会打开一个新的IE窗口，然后再关掉的。

五、showModalDialog和showModelessDialog数据传递技巧。
　　(作者语：本来想用一问一答形式来写的，但是我想不出这个怎么问，所以只好这样了。)
　　这个东西比较麻烦，我改了好几次了不是没办法说明白(语文水平越来越差了)，只好用个例子说明了。
　　例子：
　　　　现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name

　　　　　　一般的传递方式：
　　　　　　　　window.showModalDialog("filename.htm",var_name)
　　　　　　　　//传递var_name变量
　　　　　　在showModalDialog(或showModelessDialog)读取和设置时：
　　　　　　　　alert(window.dialogArguments)//读取var_name变量
　　　　　　　　window.dialogArguments="oyiboy"//设置var_name变量
　　　　这种方式是可以满足的，但是当你想在操作var_name同时再操作第二个变理var_id时呢？就无法再进行操作了。这就是这种传递方式的局限性。
　　　　
　　　　　　以下是我建议使用的传递方式：
　　　　　　　　window.showModalDialog("filename.htm",window)
　　　　　　　　//不管要操作什么变量，只直传递主窗口的window对象
　　　　　　在showModalDialog(或showModelessDialog)读取和设置时：
　　　　　　　　alert(window.dialogArguments.var_name)//读取var_name变量
　　　　　　　　window.dialogArguments.var_name="oyiboy"//设置var_name变量

　　　　　　　　同时我也可以操作var_id变量
　　　　　　　　alert(window.dialogArguments.var_id)//读取var_id变量
　　　　　　　　window.dialogArguments.var_id="001"//设置var_id变量

　　　　　　　　同样还可以对主窗口的任何对象进行操作，如form对象里的元素。
　　　　　　　　window.dialogArguments.form1.index1.value="这是在设置index1元素的值"

六、多个showModelessDialog的相互操作。
　　以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。

　　主文件的部份js代码。
　　var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px"） //打开控制窗口
　　var s2=showModelessDialog('about:blank',window,"dialogTop:200px;dialogLeft:300px"）　　//打开被控制窗口

　　控制.htm的部份代码。
　　<script>
　　　　//操作位置数据，因为窗口的位置数据是"xxxpx"方式的，所以需要这样的一个特殊操作函数。
function countNumber(A_strNumber,A_strWhatdo)
{
  A_strNumber=A_strNumber.replace('px','')
  A_strNumber-=0
  switch(A_strWhatdo)
  {
  case "-":A_strNumber-=10;break;
  case "+":A_strNumber+=10;break;
  }
  return A_strNumber + "px"
}
　　</script>
　　<input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'-')" value="上移">
　　<input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="左移">
　　<input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'+')" value="右移">
　　<input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'+')" value="下移">

　　以上关键部份是：
　　　　窗口命名方式：var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px"）
　　　　变量访问方式：window.dialogArguments.s2.dialogTop

　　这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能，通过这个原理，在showModelessDialog之间相互控制各自的显示页面，传递变量和数据等。这要看各位的发挥了。
分享到：
| 需要兼容ie浏览器的系统必须要声明DOCTYPE ...
评论
发表评论

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

相关推荐

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

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

    window.showModalDialog(javascript)

    总之，`window.showModalDialog()`是JavaScript中创建模态对话框的一种方法，主要用于提供一种用户交互的方式。然而，由于跨浏览器兼容性和用户体验的考虑，开发者在实际应用中需要谨慎使用，并考虑使用现代Web技术...

    使用selenium测试showModalDialog模态对话框

    这段代码首先定义了一个JavaScript字符串，用于重写 `showModalDialog` 方法，将其替换为 `window.open` 函数，这样对话框将以非模态窗口的形式打开，Selenium 就可以继续执行并选中这个新窗口。然后，代码模拟点击...

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

    在这个例子中，`window.showModalDialog` 是用来显示一个模态窗口，用户必须与该窗口交互（关闭它）才能继续在主窗口中操作。我们来详细探讨这个知识点。 `window.showModalDialog` 是一个古老的浏览器内置函数，...

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

    `Window.ShowModalDialog` 是一个在 Internet Explorer 浏览器中特有的方法，用于创建模态对话框。此方法允许开发者在一个新的窗口中打开一个HTML页面，并且这个新窗口将阻止用户与原始窗口交互，直到关闭为止。此外...

    js的window.showModalDialog及window.open用法实例分析

    JavaScript中的`window.showModalDialog`和`window.open`都是用于打开新窗口的方法，但它们有着不同的特性和用途。 首先，`window.open`方法是JavaScript中最常见的打开新窗口的方式，它适用于所有的主流浏览器，如...

    window.returnValue使用方法示例介绍

    `window.showModalDialog()` 是一个创建模式对话框的方法，它会阻塞用户对主窗口的交互，直到用户关闭弹出的对话框。在模式对话框中设置 `window.returnValue` 的值，然后关闭对话框，这个值会被传递回调用 `...

    javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码

    由于`showModalDialog`打开的窗口是阻塞的，直接使用`location.href`会新开一个非模态窗口，所以我们可以使用以下代码来实现页面刷新： ```javascript window.name = "__self"; // 设置window.name为特殊标识 ...

    js模式化窗口问题![window.dialogArguments]

    - `window.showModalDialog()`是IE4+支持的模态对话框，它会阻塞用户对父窗口的交互直到对话框关闭。 - `window.showModelessDialog()`则是IE5+支持的非模态对话框，允许用户同时与对话框和父窗口进行交互。 2. ...

    showModalDialog和open方法demo实例

    在JavaScript中，`showModalDialog`和`window.open`是两个用于打开新窗口或对话框的方法，它们在网页交互和用户界面设计中扮演着重要角色。这篇文章将详细讲解这两个方法的功能、用法以及它们的区别。 首先，我们来...

    showModalDialog参数传递和获

    在JavaScript中，`showModalDialog`是一个古老的浏览器API，用于打开一个模态对话窗口，它在用户与对话框交互之前阻止了对父窗口的访问。这个API在现代Web开发中已经逐渐被淘汰，但由于某些老旧系统的存在，理解其...

    javascript showModalDialog,open取得父窗口的方法

    在JavaScript中，打开新窗口的方法主要有两种：`window.open()` 和 `window.showModalDialog()`. 这两者在处理与父窗口交互时有所不同。本篇文章主要探讨如何在使用`showModalDialog`时获取父窗口的方法。 首先，让...

    showModalDialog打开窗体接收返回值

    在JavaScript编程中，`showModalDialog` 是一个古老但仍然被一些开发者使用的函数，用于以模态对话框的形式打开一个新的窗口。这个对话框会阻止用户与父窗口进行交互，直到对话框关闭。在这个过程中，我们可以传递...

    showmodaldialog的用法收集

    模态对话框的特点在于它会阻塞用户对父窗口的交互，直到对话框被关闭。相比之下，`showModelessDialog` 创建的是非模态对话框，用户可以同时与对话框和主窗口进行交互。 ### 一、`showModalDialog` 和 `...

    模态窗口，在IE下是模态，在FF下不是模态，作了最大的努力来实现通用

    2. **自定义JavaScript实现**：如果不想依赖外部库，可以编写自定义的模态窗口实现，使用CSS来控制视觉效果，JavaScript处理用户交互和阻塞页面其他部分。 3. **检测浏览器特性**：使用`feature detection`技术，如...

    js关闭模态窗口刷新父页面或跳转页面

    该方法会创建一个新的模态窗口，显示指定的HTML内容，并且这个对话框是阻塞式的，即在关闭前用户不能与父窗口进行交互。 2. `window.opener`属性：这个属性用于获取打开当前窗口的父窗口对象。 3. `window....

    如何使用showModalDialog

    `showModalDialog`函数会阻塞调用它的窗口，直到对话框关闭。当用户关闭对话框后，`showModalDialog`会返回一个值，这通常是对话框内操作的结果，比如用户输入的信息或者点击的按钮。 然而，需要注意的是，`...

    按钮上的弹出窗口单击......

    此方法可以创建非模态窗口，意味着用户可以同时与新窗口和原来的页面进行交互。然而，这种方式在现代浏览器中可能会被阻止，因为它常被视为弹出广告。 相反，`window.showModalDialog`是一个较为老式的对话框函数，...

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