直接上代码
1、open
[html] view plaincopy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹窗示例</title>
</head>
<script language="javascript">
<!--
//打开模式窗口
function open1(){
//设置模式窗口的一些状态值
var windowStatus = "dialogWidth:460px;dialogHeight:380px;center:1;status:0;";
//在模式窗口中打开的页面
var url = "test.html";
//将模式窗口返回的值临时保存
var temp = showModalDialog(url,"",windowStatus);
//将刚才保存的值赋给文本输入框returnValue
document.all.returnValue.value = temp;
}
//打开全屏窗口
function open3(){
//设置窗口的一些状态值
var windowStatus = "fullscreen = 1";
//在窗口中打开的页面
var url = "test.html";
window.open(url,"noMenuWindowName",windowStatus);
}
-->
</script>
<body>
<input type="button" name="btn1" value="打开窗口" onClick="open1()">
<br>
从窗口返回的值：
<input type="text" id="returnValue" name="returnValue">
</body>
</html>
弹出的窗口2.html
[html] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function setV(){
//把值返回给父窗口
window.opener.document.all.ff.value="usr";
window.close();
}
</script>
</head>
<body>
<input type="button" onclick="setV();" value="保存"/>
</body>
</html>
2、showModalDialog
[html] view plaincopy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>window示例</title>
</head>
<script language="javascript">
<!--
//打开模式窗口
function open1(){
//设置模式窗口的一些状态值
var windowStatus = "dialogWidth:460px;dialogHeight:380px;center:1;status:0;";
//在模式窗口中打开的页面
var url = "test.html";
//将模式窗口返回的值临时保存
var temp = showModalDialog(url,"",windowStatus);
//将刚才保存的值赋给文本输入框returnValue
document.all.returnValue.value = temp;
}
//打开全屏窗口
function open3(){
//设置窗口的一些状态值
var windowStatus = "fullscreen = 1";
//在窗口中打开的页面
var url = "test.html";
window.open(url,"noMenuWindowName",windowStatus);
}
-->
</script>
<body>
<input type="button" name="btn1" value="打开窗口" onClick="open1()">
<br>
从窗口返回的值：
<input type="text" id="returnValue" name="returnValue">
</body>
</html>
2.html
[html] view plaincopy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在模式窗口中打开的页面</title>
</head>
<script language="javascript">
<!--
//将选中的值先保存到隐含对象上
function ok(tempValue){
document.all.selectedValue.value = tempValue;
window.close();
}
//关闭页面时将隐含对象中的值传回
function willReturnValue(){
window.returnValue = document.all.selectedValue.value;
// window.close();
}
-->
</script>
<body onUnload="willReturnValue()" bgcolor="#D4D0C8">
<center>
请单选您的爱好：
<br>
<br>
<input type="radio" name="lover" value="体育运动" onClick="ok(this.value)">体育运动
<br>
<input type="radio" name="lover" value="休闲娱乐" onClick="ok(this.value)">休闲娱乐
<br>
<input type="radio" name="lover" value="看书读报" onClick="ok(this.value)">看书读报
<br>
<input type="radio" name="lover" value="琴棋书画" onClick="ok(this.value)">琴棋书画
<input type="hidden" id="selectedValue" name="selectedValue">
</center>
</body>
</html>
可以看到二者的区别：
1、showModalDialog和open一样也是3个参数，showModalDialog(文件地址,window,窗口属性)，open(文件地址,window,窗口属性)。
2、二者都向父窗口中返回了值。open打开的窗口，有最大化最小化按钮，而showModalDialog则只有一个关闭的按钮。
3、open打开的新窗口可以鼠标可以点击父窗口的，showModalDialog只有把新打开的窗口关了鼠标的焦点才可触到父窗口