转自http://dwcmayday201204063551.iteye.com/blog/1621751
一、前言
要打开一个可以载入页面的子窗口有三种方法,分别是window.open、window.showModalDialog和window.showModelessDialog。
open方法就是打开一个页面,可以说同用url链接打开一个页面一样,不推荐使用,因为很多浏览器会拦截。
这里推荐使用的是window.showModalDialog和window.showModelessDialog,下面介绍二者的异同和用法。
二、 showModalDialog和showModelessDialog的区别
showModalDialog:被打开后就会始终保持输入焦点,除非对话框被关闭,否则用户无法切换到父窗口,类似alert的运行效果。
showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响,最多是被挡住一下而以。
三、怎样才让在showModalDialog和showModelessDialog里的超连接不弹出新窗口
在默认情况下,showModalDialog和showModelessDialog窗口中的链接都会导致打开一个新的窗口,但这不是我们需要的。
解决这个问题的方法是在被showModalDialog和showModelessDialog窗口调用的页面添加
如下:
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;");
都可
九、 窗口高度自适应,这个需要在每个弹出框加载的页面放置,比较麻烦,而且不完善,使用时请调试好
然后如下设置即可: