showModalDialog的一个实例
test.html页面通过函数调用showModalDialog，显示show_modal_dialog.html页面，并向show_modal_dialog.html传递参数。
在show_modal_dialog.html页面通过dialogArguments或者opener获取函数传递过来的参数。
test.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>testing page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script>
function showDialog()
{
showModalDialog("show_modal_dialog.html",
["Enter 3D point coordinates", "x", "y", "z"],
"dialogwidth: 400; dialogheight: 300; resiable: yes");
}
</script>
</head>
<body>
<a href="show_modal_dialog.html">Show Modal Dialog</a>
<button onclick="showDialog()">Show Dialog</button>
</body>
</html>
show_modal_dialog.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>Window method showModalDialog() Testing</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</title>
<body>
<form>
<fieldset id="fields"></fieldset>
<div style="text-align:center">
<button onclick="okay()">Okay</button>
<button onclick="cancel()">Cancel</button>
</div>
<script>
if (window.dialogArguments)
var args = window.dialogArguments; // IE
else
var args = window.opener; // FF or Chrome
var text = "<legend>" + args[0] + "</legend>";
for (var i = 1; i < args.length; i++)
text += "<lable>" + args[i] + ": <input id='f" + i + "'></lable><br/>";
document.getElementById("fields").innerHTML = text;
function cancel() { window.close(); }
function okay() {
window.returnValue = [];
for (var i = 1; i < args.length; i++)
window.returnValue[i-1] = document.getElementById("f" + i).value;
window.close();
}
</script>
</form>
</body>
</html>
两个页面要通过Web服务器的方式访问，才能满足same-origin，页面运行的效果如下：