js 模态窗口 以及返回值
给你参考一下, JS兼容就可以实现了, 最重要的内容我已经用红色标出:
IE 与 FireFox 的 showModalDialog
在网页程序中,
有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,
而在IE中,我们可以使用showModalDialog来达成,
语法如下 :
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
范例:
window.showModalDialog("openwin.html","Arguments","dialogHeight: 200px; dialogWidth: 200px; dialogTop: 10px; dialogLeft: 10px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");
但是.在Firefox中却没有showModalDialog这东西,
而在FireFox中我们只能使用window.open实现这样的功能,
window.open的语法如下 :
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,
而在FireFox下要让开启的窗口跟IE的showModalDialog一样的话,
只要在sFeatures中加个modal=yes就可以了,
范例如下:
window.open('openwin.html','newWin','modal=yes,width=200,height=200,resizable=no,scrollbars=no');
提到了子窗口,不得不提的就是子窗口跟母窗口间的交互操作,
因为我想很多人开启对话窗口应该都是为了将操作完的结果丢回去给母窗口...
如果是用showModalDialog的话,
在子窗口中要存取母窗口的函数的话,
要注意两个地方,
1.(母窗口中)开启窗口:
window.showModalDialog("openwin.html",self,'modal=yes,width=775,height=700,resizable=no,scrollbars=no');
在第二个参数(vArguments),改成self.
2.(子窗口中)调用母窗口的函数:
window.dialogArguments.ShowMsg(obj.value);
ShowMsg为母窗口中的函数.
而使用window.open的话,
则是要注意一个地方,
1.(子窗口中)调用母窗口的函数:
window.opener.ShowMsg(obj.value);
使用window.opener去接母窗口的对象.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
//window.showModalDialog("openwin.html","Arguments","dialogHeight: 200px; dialogWidth: 200px; dialogTop: 10px; dialogLeft: 10px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");
//window.open('openwin.html','newWin','modal=yes,width=200,height=200,resizable=no,scrollbars=no');
function showDiolog() {
/*
if (window.showModalDialog) {
window.showModalDialog("/HTML/test1.htm", "newWin", "dialogHeight: 200px; dialogWidth: 200px; dialogTop: 10px; dialogLeft: 10px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");
}
else {
window.open('/HTML/test1.htm', 'newWin', 'modal=yes,width=200,height=200,resizable=no,scrollbars=no');
}
*/
var open = window.open('/HTML/test1.htm', 'self', 'modal=yes,width=200,height=200,resizable=no,scrollbars=no');
}
function alertdd() {
alert(window.mm);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" onclick='showDiolog();' value="button" />
<input id="Button2" type="button" onclick='alertdd();' value="button" />
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//window.showModalDialog("openwin.html","Arguments","dialogHeight: 200px; dialogWidth: 200px; dialogTop: 10px; dialogLeft: 10px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");
//window.open('openwin.html','newWin','modal=yes,width=200,height=200,resizable=no,scrollbars=no');
function showDiolog() {
if (window.showModalDialog) {
window.showModalDialog("/HTML/test1.htm", "newWin", "dialogHeight: 200px; dialogWidth: 200px; dialogTop: 10px; dialogLeft: 10px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");
}
else {
window.open('/HTML/test1.htm', 'newWin', 'modal=yes,width=200,height=200,resizable=no,scrollbars=no');
}
}
function setWin() {
window.opener.mm = 988;
}
</script>
</head>
<body>
<a href='/Default.aspx'>ddddddddddddddddddddddddddddddd</a>
<input id="Button1" type="button" onclick='showDiolog();' value="button" />
<input id="Button2" type="button" onclick='setWin();' value="设置主窗口的值" />
</body>
</html>