对话框
Window 对象提供了三个方法来向用户显示简单的对话框：
alert()：向用户显示一条消息并等待用户关闭窗口confirm()：向用户显示一条消息，要求用户单击「确定」或「取消」并返回一个布尔值prompt()：向用户显示一条消息，等待用户输入字符串并返回这个字符串
举个例子：
do {
var name = prompt("你叫什么名字?");
var correct = confirm("你输入了'" + name + "'.\n点击确定继续或取消重新输入");
} while (!correct);
alert("你好，" + name);
除了上面三个方法，还有个更复杂的方法 showModalDialog()，显示一个包含 HTML格式的「模态对话框」，可以给它传入参数，以及从对话框返回值。第一个参数指定提供对话框 HTML 内容的 URL，第二个参数是一个任意值，这个值在对话框的脚本里可以通过 window.dialogArguments 属性来访问，第三个参数是一个非标准的列表，包含以分号分隔开的 name=value 对，如果提供了这个参数，可以配置对话框的尺寸或其他属性。该方法不会直到窗口关闭前不会返回，当窗口关闭后，window.returnValue 属性值就是此方法的返回值。下面看一个 showModalDialog() 方法的使用示例：
<!--
这个HTML文件不是独立的，这个文件由 showModalDialog() 所调用
它希望window.dialogArguments是一个字符串组成的数组
数组的第一个元素将放置在对话框顶部
剩下的每个元素是每行输入框的标识
当点击Ok时返回一个数组，这个数组由每个输入库组成，
点击Cancel时对话框关闭
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>showModalDialog使用示例</title>
</head>
<body>
<form>
<fieldset id="fields"></fieldset>
<div style="text-align: center">
<button onclick="okay()">Ok</button>
<button onclick="cancel()">Cancel</button>
</div>
<script>
var args = window.dialogArguments;
var text = "<legend>" + args[0] + "</legend>";
for (var i = 0; i < args.length; i++) {
text += "<label>" + args[i] + ":<input id='f" + i + "'></label><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>
我们可以这么调用上面的 HTML：
showModalDialog("/path/to/modal.html", ["输入3D坐标", "x", "y", "z"], "dialogWidth:400; dialogHeight:300; resizable:yes");
注：
showModalDialog()方法在最新版 Chrome 及 Firefox 中已经移除。
No Comments