JavaScript 对话框

在本教程中，你将学习如何在 JavaScript 中创建对话框。

创建对话框

在 JavaScript 中，你可以创建对话框或弹出窗口以与用户进行交互。你可以使用它们来通知用户或在继续之前接收某种用户输入。

你可以创建三种不同类型的对话框 - 警报， 确认和 提示框。

这些对话框的外观由操作系统和/或浏览器设置决定，无法使用 CSS 进行修改。此外，对话框是模态窗口; 当显示一个对话框时，代码执行停止，并且只有在它被解除后才恢复。

在下一节中，我们将详细讨论每个对话框。

创建警报对话框

警告对话框是最简单的对话框。它使你可以向用户显示短消息。它还包括 确定 按钮，用户必须单击 确定 按钮才能继续。

你可以使用 alert() 方法创建警报对话框。你已经在前面的章节中看到过很多警报示例。我们来看一个例子：

var message = "Hi there! Click OK to continue.";
alert(message);
 
/* The following line won't execute until you dismiss previous alert */
alert("This is another alert box.");

创建确认对话框

确认对话框允许用户确认或取消操作。确认对话框看起来类似于警告对话框，但它包含 取消 按钮和 确定 按钮。

你可以使用 confirm() 方法创建确认对话框。此方法仅返回布尔值（true 或 false），具体取决于用户是单击 确定 还是 取消 按钮。这就是为什么它的结果经常在使用时分配给变量的原因。

以下示例将根据单击的按钮在浏览器中打印一些文本。

var result = confirm("Are you sure?");
 
if(result) {
    document.write("You clicked OK button!");
} else {
    document.write("You clicked Cancel button!");
}

创建提示对话框

提示对话框用于提示用户输入信息。提示对话框包括文本输入字段，确定和取消按钮。

你可以使用 prompt() 方法创建提示对话框。当用户单击 确定 按钮时，此方法将返回在输入字段中输入的文本；如果用户单击 取消 按钮，则返回 null。如果用户单击 确定 按钮而未输入任何文本，则返回空字符串。因此，在使用变量时，通常会将其结果赋值给变量。

以下示例将打印单击 确定 按钮时输入的值。

var name = prompt("What's your name?");
 
if(name.length > 0 && name != "null") {
    document.write("Hi, " + name);
} else {
    document.write("Anonymous!");
}

prompt() 方法返回的值始终为字符串。这意味着如果用户在输入字段中输入 10，则返回字符串 10 而不是数字 10。

因此，如果要将返回的值用作数字，则必须将其转换为数字，如下所示：

var age = Number(prompt("What's your age?"));

提示： 要在对话框中显示换行符，请使用换行符或换行符（\n）; 反斜杠后跟字符 n。