一、前言
要打开一个可以载入页面的子窗口有三种方法，分别是window.open、window.showModalDialog和window.showModelessDialog。
open方法就是打开一个页面，可以说同用url链接打开一个页面一样，不推荐使用，因为很多浏览器会拦截。
这里推荐使用的是window.showModalDialog和window.showModelessDialog，下面介绍二者的异同和用法。
二、 showModalDialog和showModelessDialog的区别
showModalDialog：被打开后就会始终保持输入焦点，除非对话框被关闭，否则用户无法切换到父窗口，类似alert的运行效果。
showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响，最多是被挡住一下而以。
三、怎样才让在showModalDialog和showModelessDialog里的超连接不弹出新窗口
在默认情况下，showModalDialog和showModelessDialog窗口中的链接都会导致打开一个新的窗口，但这不是我们需要的。
解决这个问题的方法是在被showModalDialog和showModelessDialog窗口调用的页面添加<base target="_self" />
如下：
<title>被打开的页面</title>
<base target="_self" />
四.、showModalDialog和showModelessDialog不使用缓存
showModalDialog和showModelessDialog在第一次打开页面时会默认缓存该页面，如果再次打开相同URL的页面的话，他们会直接调用缓存中的页面，而不是从服务器返回，要不使用缓存可进行如下配置：
<title>被打开的页面</title>
<meta http-equiv="pragram" content="no-cache"> //禁止浏览器从本地缓存中调阅页面，网页不保存在缓存中，每次访问都刷新页面。
<meta http-equiv="cache-control" content="no-cache, must-revalidate"> //同上面意思差不多，必须重新加载页面
<meta http-equiv="expires" content="0"> //网页在缓存中的过期时间为0，一旦网页过期，必须从服务器上重新订
上面的配置不一定有效果，所以不推荐使用，最好的办法是在URL后加上一个时间戳，如下：
url = url + “&time=” + new Date();
五、如何刷新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会弹出新窗口的。
由于在刷新上处理起来非常不方便，所以使用ajax结合showModalDialog和showModelessDialog使用是非常适合的，建议结合使用。
六、 用javascript关掉showModalDialog(或showModelessDialog)打开的窗口
<input type="button" value="关闭" onclick="window.close()">
也要配合<base target="_self">，不然会打开一个新的IE窗口，然后再关掉的。
七、 showModalDialog和showModelessDialog数据传递技巧（例子用的是showModalDialog函数，showModelessDialog函数的用法一样）
1) 父窗体向打开的窗体传递数据一般使用url参数传递
2) 打开的窗体，即子窗体向父窗体进行数据传递有两种方法
(1) 第一种称为“函数法”，同调用一个函数并返回值一样
可以通过在被调用的页面（子页面）使用window.returnValue来设置返回值，返回值可以是任何值或对象，调用页面（父页面）直接获取返回值即可。
//父窗体js，直接通过函数获取返回值
function openModalWindow(){
var returnValue = window.showModalDialog("sonPage.aspx");
alert(returnValue);
}
//子窗体js，通过window.returnvalue来设置返回值
function setReturnFatherPageValue(){
window.returnValue = true;
}
(2) 第二种称为“引用法”，通过传递父窗体的引用，我们可以操作父窗体上的所有东西
要使用引用法就必须在打开子窗体时将父窗体作为一个参数传递给子窗体，而在子窗体可以通过window.dialogArguments获取到传递过来的父窗体的引用。
//父窗体js，将整个父window作为参数传递给子窗体
function openModalWindow(){
window.showModalDialog("sonPage.aspx", window);
}
//子窗体js，通过window.dialogArguments可以访问父window中的所有元素，它在这里代表了父window对象
function openModalWindow(){
var txt = window.dialogArguments.document.getElementByIdx("txt");
var lab = window.dialogArguments.document.getElementByIdx("lab");
txt.value = "sonPageChangedValue";
lab.value = "isTheSame";
}
八、 控制弹出窗体的样式
1) dialogHeight: 对话框高度，不小于100px
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。
举例如下：
window.showModalDialog("sonPage.aspx", "", "dialogHeight=350px;dialogwidth=410px;dialogLeft=0;dialogTop=25;help=no;resizable=no;status=no;scrollbars=no;");
或
window.showModalDialog("sonPage.aspx", window, "dialogHeight=350px;dialogwidth=500px;help=no;scrollbars=no;");
都可
九、 窗口高度自适应，这个需要在每个弹出框加载的页面放置，比较麻烦，而且不完善，使用时请调试好
<script type="text/javascript">
function resetDialogHeight(){
if(window.dialogArguments == null){
return; //忽略非模态窗口
}
var ua = navigator.userAgent;
var height = document.body.offsetHeight;
if(ua.lastIndexOf("MSIE 6.0") != -1){
if(ua.lastIndexOf("Windows NT 5.1") != -1){ //alert("xp.ie6.0");
window.dialogHeight=(height+102)+"px";
}
else if(ua.lastIndexOf("Windows NT 5.0") != -1){ //alert("w2k.ie6.0");
window.dialogHeight=(height+49)+"px";
}
}
else{
window.dialogHeight=height+"px";
}
}
</script>
然后如下设置即可：
<body onload="resetDialogHeight()">
分享到：
相关推荐
Window.showModalDialog 和 Window.open 用法简介 Window.showModalDialog 和 Window.open 都是 JavaScript 中的方法，用于创建新窗口或对话框，下面分别介绍它们的用法和参数。 一、Window.open() 方法 Window....
总结来说，`window.open`适合创建非阻塞的新窗口，而`window.showModalDialog`和`window.showModelessDialog`则用于创建具有特定交互模式的对话框。选择哪个方法取决于应用的具体需求，比如是否需要用户在完成对话框...
总的来说，`window.showModalDialog()`和`window.showModelessDialog()`是JavaScript中较老的弹出对话框技术，它们提供了对对话框外观和行为的控制，但在现代Web开发中，由于浏览器兼容性和可访问性问题，已被其他...
一个是window.showModalDialog()方法，后者是存在父子关系的一种弹出窗口，只有子窗关闭，父窗口才激活，并且可以传送参数和返回值。正好又温习一遍用法，顺便在此记录过程中遇到的问题。 基本介绍： ...
这里提到的`ShowDialog`实际上是指通过JavaScript中的`window.open()`方法及Internet Explorer特有的`window.showModalDialog()`和`window.showModelessDialog()`方法来实现的。下面将详细介绍这些方法的具体用法...
- `window.showModelessDialog()`则是IE5+支持的非模态对话框，允许用户同时与对话框和父窗口进行交互。 2. 显示样式问题： 使用`window.showModalDialog()`时，可能遇到不同浏览器下显示尺寸不一致的问题。例如...
#### 二、`showModalDialog()`与`showModelessDialog()`的区别 - **`showModalDialog()`**：此方法创建一个模态对话框，用户必须关闭该对话框才能继续操作主窗口。它类似于弹窗，直到用户进行操作前，主窗口的操作...
本文主要关注JavaScript中的两种弹出窗口技术：`window.open`和`window.showModalDialog`/`window.showModelessDialog`。 首先，`window.open`是JavaScript中最常见的用于打开新窗口的方法。它接受三个参数：`url`...
尽管`window.showModalDialog()`和`window.showModelessDialog()`为IE提供了一种创建模态和非模态对话框的简便方法，但考虑到IE的市场份额不断下降以及对现代Web标准的支持不足，开发者应考虑使用更广泛的跨浏览器...
JavaScript 提供了多种方式来创建弹出窗口，其中最常见的两种方法是 `window.open()` 和 `window.showModalDialog()` 及 `window.showModelessDialog()` 方法。 ##### 2.1 `window.open()` `window.open()` 方法...
`showModelessDialog`和`showModalDialog`方法可以分别创建非模态和模态对话框，前者允许用户在对话框打开时继续与原页面交互，而后者则会阻止用户与原页面的其他部分互动，直到对话框关闭。 #### 注册自定义客户端...
本文将详细介绍 `window.open`, `window.alert`, `window.confirm`, `window.prompt`, `window.showModalDialog` 和 `window.showModelessDialog` 的使用方法及其参数配置。 #### 二、window.open `window.open` ...
本文将深入探讨JavaScript中用于创建对话框的两种主要方法：`window.open`和`showModalDialog()`、`showModelessDialog()`。 首先，我们来看`window.open`函数。这个函数用于在新的浏览器窗口中打开一个页面，其...
对于使用`window.showModalDialog()`或`window.showModelessDialog()`方法打开的对话框，原理是类似的，只是调用方式和返回值处理略有不同。`showModalDialog()`可以返回一个值，这个值可以作为对话框关闭时的结果...
在JavaScript中，弹出窗口通常指的是使用`window.open()`、`window.showModalDialog()`或`window.showModelessDialog()`等方法创建的新窗口。这些方法在Web应用中常用于实现一些交互性的功能，如用户确认、数据输入...
与`window.showModelessDialog()`类似，但使用`window.showModalDialog()`打开的是一个模式对话框，即在对话框关闭之前，主窗口无法进行任何操作。示例代码如下： ```csharp Response.Write("<script>window....
JavaScript还提供了两种特殊的对话框函数，`showModalDialog()`和`showModelessDialog()`，它们创建的对话框具有更多的交互性和控制性。`showModalDialog()`打开的窗口是模式化的，这意味着用户必须关闭对话框才能...
无论是使用`window.open()`还是模态/非模态对话框，都可以通过`window.opener`属性来引用打开当前窗口的窗口，从而实现子窗口与父窗口之间的数据传递和交互。例如，子窗口可以使用`window.opener.location.reload()`...
如： showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的...
### 模态窗口demo及说明 ...尽管`window.showModalDialog()`和`window.showModelessDialog()`提供了方便的功能，但由于它们是非标准方法，在实际项目中应考虑使用更广泛的解决方案来确保良好的跨浏览器兼容性。