window对象中有多个内置的对话框函数,包括模式对话框showModalDialog、非模式对话框showModeless、警告对话框、确认对话框、格式对话框。
模式对话框就是对话框弹出后,不能操作父对话框,关闭之后才可以继续操作父对话框。
而非模式对话框在弹出之后,可以继续操作父对话框。
另外,代码中还包含了用子对话框中的数据,修改父对话框中的数据。
下面的代码只支持在ie浏览器运行,不支持在谷歌的chrome浏览器,因为chrome浏览器现在已经不支持不支持模式、非模式对话框了。
由此想到,在前端开发中,最好不要直接调用对话框函数,而是进行一个封装,这样在浏览器不支持这些函数,或者在解决浏览器兼容性问题时,直接替换封装函数内部的这些函数,而不是去代码中一个一个的改,省时省力。
说句题外话,谷歌在浏览器的设计上,根本不会考虑你的感受,实力决定一切。
父窗口代码:
<!DOCTYPE HTML >
<HTML>
<HEAD>
<meta charset="gb2312">
<script language="javascript">
var sUsername = "";
function updateUsername()
{
if(sUsername == "")
sUsername = '小咪';
showName.innerHTML = "<font color='red'>"+sUsername+"</font>";
}
function showDialog(f)
{
var sFeatures = "dialogWidth:800px;dialogHeight:560px;status:off;help:no";
switch(f)
{
case 1:
//第2个参数传入了window对象
window.showModalDialog("js window对象:非模式-模式窗口.html",window,sFeatures);
break;
case 2:
window.showModelessDialog("js window对象:非模式-模式窗口.html",window,sFeatures);
break;
case 3:
alert("alert对话框!");
break;
case 4:
var r;
r = confirm("请确认!");
break;
default:
var rr;
rr = prompt("请输入用户名:","123"); //第2个参数为默认值
inputValue.innerText = rr; //设置了id才能这么直接赋值
}
}
</script>
</HEAD>
<BODY οnlοad="updateUsername();">
<h1>window对象的对话框</h1>
<hr>
用户名:<span id="showName"></span>
<br>
<hr>
输入密码:<span id="inputValue"></span>
<form>
<input type="button" value="模式对话框" οnclick="showDialog(1);">
<input type="button" value="非模式对话框" οnclick="showDialog(2);">
<input type="button" value="警告对话框" οnclick="showDialog(3);">
<input type="button" value="确认对话框" οnclick="showDialog(4);">
<input type="button" value="提示对话框" οnclick="showDialog(5);">
</form>
</BODY>
</HTML>
子窗口:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="gb2312">
<script language="javascript">
//通过dialogArguments属性,获取传入的调用者的window对象.
//修改调用者window对象中的变量和函数
function sendUsername()
{
//window对象的dialogArguments属性获取调用者传入的参数
var callWin = window.dialogArguments;
//通过设置name属性,可以用下面的方式引用值
callWin.sUsername = document.Data.username.value;
callWin.updateUsername();
}
</script>
</HEAD>
<BODY>
<form name="Data">
用户名:<input type="text" name="username"><br>
<input type="button" value="应用" οnclick="sendUsername();">
<input type="button" value="确定" οnclick="sendUsername();window.close();">
<input type="button" value="取消" οnclick="window.close();">
</form>
</BODY>
</HTML>