一、前言
要打开一个可以载入页面的子窗口有三种方法，分别是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()">
分享到：
相关推荐
在网页设计和开发中，`div`（Division）模式窗口是一种常见的布局技术，它通过HTML中的`<div>`标签来实现。`div`元素本质上是一个可样式的块级元素，可以容纳其他HTML元素，用于组织页面结构，实现复杂的网页布局。...
在PowerBuilder（PB）开发环境中，MDI（Multiple Document Interface）窗口是一种常见的应用程序设计模式，允许用户在同一应用程序中同时打开多个文档或子窗口。然而，有时在PB的MDI窗口中添加控件时，可能会遇到一...
例如，如果教师尝试选择超出限额的课程，模式窗口可以显示错误信息，阻止进一步的操作，直到问题得到解决。 总的来说，模式窗口互调是提升用户界面交互性和效率的重要手段。在这个小例子中，我们能够看到如何通过...
解决此问题的办法很简单，右键单击 Matlab 程序图标，选择属性，在兼容性选项卡中勾选“用兼容性运行此程序”，兼容模式为 Windows NT 4.0（Service Pack 5），确定后即可恢复正常。 2. 安装时出现红色叉杠并出现...
在IT领域，尤其是在Web开发中，"Model--模式窗口的使用"是一个常见的话题。模式窗口，也称为模态对话框或模态窗口，是一种在用户界面中占据中心位置，阻止用户与页面其他部分交互，直到用户与其交互后才能继续操作的...
三维模型问题整理和解决办法在SuperMap平台三维GIS模型制作和配置过程中是经常遇到的，以下是一些常见的问题及解决办法： 1. 模型贴图全部丢失的问题及解决方法 - 原因一：max贴图丢失，通常由于贴图文件未放在...
描述中的"非常好的解决了silverlight 模式窗口的问题"意味着这个DEMO提供了一种有效的解决方案，使得在Silverlight应用中可以创建具有类似传统桌面应用中模态窗口效果的浮出层。 在提供的压缩包文件列表中，我们...
7. **PB技巧100例**：这是一系列具体的实例，展示了在PowerBuilder开发中的一些巧妙应用和解决问题的方法，是提高技能的好材料。 8. **PB技巧及经验**：这部分内容可能是资深开发者的经验分享，包括最佳实践、设计...
"MP常见问题解决及全部参数表" MP常见问题解决及全部参数表是指在MP飞行控制系统中，为了解决一些常见的问题和调整参数设置，以确保飞行器的稳定运行和安全飞行。 ACRO_LOCKING ACRO_LOCKING是一个姿态锁定参数，...
"管家婆常见问题解决处理方案.pdf" 本文档提供了管家婆软件使用中常见问题的解决方案，涵盖了连接服务器、登录问题、单据处理、基本资料导入、备份问题、用户配置、打印设置、销售单处理等多个方面。每个问题都提供...
在网页设计和开发中，模式窗口（Modal Windows）是一种常见的用户交互元素，它可以在不离开当前页面的情况下显示额外的信息或功能。这个"JavaScript可拖动的模式窗口"是一个基于jQuery的插件，它允许用户通过鼠标...
Pixhawk 飞控常见问题解决方法 Pixhawk 飞控是一款高性能的飞控系统，然而，在实际应用中，用户可能会遇到一些问题，本文将对 Pixhawk 飞控常见问题进行解决方法的总结。 一、无法解锁（黄灯闪烁） 无法解锁的...
### VC常见问题解决方案详解 #### 1. 类在工作区间突然消失 问题描述：在使用VC++时，可能会遇到某类在工作区界面突然不见的情况。 解决方案：这通常是因为类被隐藏了。解决方法是在`FILEVIEW`中查找该类的头文件...
本篇将详细介绍Vim的使用方法以及常见问题的解决策略。 1. **启动与退出Vim** - 启动Vim：在命令行输入`vim`后跟文件名，如`vim test.txt`，将打开或创建名为`test.txt`的文件。 - 退出Vim：在正常模式下（非插入...
在Windows 7操作系统中，有时会...根据具体情况进行尝试，一般情况下，通过调整兼容性设置、更新软件或应用补丁，应该能解决问题。如果问题依然存在，可能需要进一步调查Simware的日志或联系软件开发者寻求技术支持。
Ubuntu Linux系统常见问题解决方法 本文将详细介绍 Ubuntu Linux 系统中常见的系统问题和应用软件问题的解决方法。 一、系统问题 1. 系统无法启动 可能问题是 MBR 受损或 GRUB 错误。解决方法是，进入救援模式，...
JavaScript弹出窗口是网页交互中常见的一种功能，用于显示...以上就是关于JavaScript弹出窗口常见问题的总结，包括如何处理刷新、弹出、刷新和关闭等操作。理解这些知识点可以帮助开发者更有效地控制页面和用户交互。
易语言提供了丰富的调试工具，如`调试模式`，帮助开发者定位和解决问题。 7. **学习和参考社区资源**：易语言拥有活跃的社区，开发者们会分享许多解决常见问题的代码片段和教程。可以查找类似问题的解决方案，如...