JavaScript 对话框

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

创建对话框

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

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

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

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

创建警报对话框

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

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

var message = "Hi there! Click OK to continue.";
alert(message);
 
/* 在您关闭之前的警报之前，以下行不会执行 */
alert("This is another alert box.");

创建确认对话框

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

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

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

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?"));