第一种方法:
window.showModalDialog() 方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog() 方法用来创建一个显示HTML内容的非模态对话框。
例子:
parent.html
function add(){
var $obj = $("#top");//传递到子页面的对象
var url = "child.html?random="+Math.random();
str = window.showModalDialog(url,$obj,
"dialogHeight:200px;dialogWidth:200px;dialogLeft:300px;dialogTop:300px;"+
"center:yes;help:no;resizable:no,status:no;scroll:no");
alert(str);
$obj.append(str);
}
child.html
function sub(){
var obj = window.dialogArguments;//获取父页面传递的对象
alert(obj.html());
window.returnValue = "<h3>sss</h3>";//设置返回到父页面的值
window.close();
}
注缓存问题:当设置的弹出网页固定时(如"modal.htm"页面),ie很可能到临时文件区,
下载上次产生的该页面(openPage.html),而没有重新加载
常用属性:
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。
第二种方法:
open模式
例:
parent.html
function addConfig(id,mark){
var OpenWindow= window.open("child.html","新页",
"width=500,height=400,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no");
OpenWindow.focus();
if(OpenWindow!=null){
if(window.attachEvent){//监听弹出窗口事件
OpenWindow.attachEvent("onunload", function(){
//jQuery("#"+id).append(jQuery("#returnvalue").val());
});
}
}
}
child.html
function sub(){
window.close();
var e = window.opener.document.createElement("div");//在父页面创建div标签
e.innerHTML="222";
var s = window.opener.document.getElementById("btn");
s.appendChild(e);
}
注:页面跳转、刷新等也会执行onunload事件
常用参数:
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;