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() 方法创建确认对话框。此方法仅返回布尔值(truefalse),具体取决于用户是单击 确定 还是 取消 按钮。这就是为什么它的结果经常在使用时分配给变量的原因。

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

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