JavaScript 三种对话框：alert、confirm 与 prompt 详解

JavaScript 对话框概述

在 JavaScript 开发中，经常需要使用弹窗来增强页面的交互体验。常见的对话框包括 alert()、prompt() 等方法，它们会在屏幕上显示指定内容，用于实现用户与应用程序之间的双向交流。

JavaScript 提供了三种主要对话框，分别通过调用 window 对象的 alert()、confirm() 和 prompt() 方法实现。利用这些方法，开发者可以完成简单的输入输出操作，实现与用户的交互逻辑。

本文将逐一介绍这三种对话框的具体用法，先对各个方法进行详细解析，随后进行对比总结，帮助读者全面理解其功能与差异。

alert() 警示对话框

第一种：alert() 方法

alert() 是三种对话框中最基础且易于使用的一种，主要用于显示警示信息。它会在对话框中展示括号内的文本，并包含一个“确定”按钮。用户阅读信息后，点击该按钮即可关闭对话框。以下是一个使用 alert() 的示例代码：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //JavaScript脚本标注
alert("上联：山石岩下古木枯");//在页面上弹出上联
alert("下联：白水泉边少女妙");//在页面上弹出下联
</script>
</head>
</html>

执行上述代码后，页面会弹出对话框显示文字“上联：山石岩下古木枯”，效果如下：

接着，点击“确定”按钮后，会弹出第二个对话框显示“白水泉边少女妙！”，效果如下：

上述示例展示了两次弹窗的过程：首先显示“上联：山石岩下古木枯”，点击确定后显示“白水泉边少女妙！”。我们来分析这个例子的执行逻辑：

a、在 <script> 脚本块中连续调用了两次 alert() 方法；

b、每次调用时，在括号内分别传入了一段文本信息。运行页面后，当用户点击第一个对话框的“确定”按钮，才会触发第二个对话框的显示。需要注意的是，这两个对话框是依次显示的，而非重叠，因为 JavaScript 会等待第一个 alert() 执行完毕且用户点击“确定”后，才继续执行第二个 alert()。

alert() 是 window 对象的一个方法，调用时既可以写成 window.alert()，也可以简写为 alert()，两者功能一致，均用于生成带有“确定”按钮的警示对话框，并在其中显示括号内的信息。

confirm() 确认对话框

第二种：confirm() 方法

confirm() 方法的用法与 alert() 类似，区别在于对话框中除了“确定”按钮外，还包含一个“取消”按钮，因此被称为确认对话框。在调用 window 对象的 confirm() 或后续介绍的 prompt() 时，同样可以省略 window 前缀。以下是一个关于 confirm() 的示例代码：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
confirm("上联：一但重泥拦子路；下联：两岸夫子笑颜回"); //在页面上弹出确认对话框
</script>
</head>
</html>

显示效果如下：

分析上述示例：

a、在 <script> 脚本块中使用了 confirm() 方法；

b、在 confirm() 括号内添加了文本信息。运行效果如上图所示：如果用户点击“确定”按钮，confirm() 方法返回 true；如果点击“取消”按钮，则返回 false。无论用户选择哪个按钮，对话框都会关闭，并继续执行后续的 JavaScript 代码。虽然点击两个按钮的结果都是关闭对话框，但它们返回的布尔值不同，这使得开发者可以在后台通过代码处理不同的用户选择。请看以下示例，体会 confirm() 返回布尔值的实际应用：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var con;
con=confirm("你喜欢玫瑰花么?"); //在页面上弹出对话框
if(con==true)alert("非常喜欢!");
else alert("不喜欢!");
</script>
</head>
</html>

分析上述示例：

a、在 <script> 脚本块中声明了一个变量 con；

b、语句 con=confirm() 将 confirm() 返回的布尔值赋值给变量 con；

c、通过 if 语句判断 con 的值，从而执行不同的逻辑分支。执行效果如下：

如果点击“确定”按钮，页面显示如下：

如果点击“取消”按钮，页面显示如下：

prompt() 提示对话框

第三种：prompt() 方法

alert() 和 confirm() 仅用于显示已有信息，用户无法输入内容。而 prompt() 方法不仅显示信息，还提供文本框供用户输入，并包含“确定”和“取消”两个按钮。如果用户点击“确定”，prompt() 返回用户在文本框中输入的字符串（或初始默认值）；如果点击“取消”，则返回 null。这种对话框被称为提示框，在三种对话框中交互性最强。

以下示例展示了两次弹出提示对话框，允许用户输入相关信息，代码如下：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var name,age;
name=prompt("请问你叫什么名字?"); /*在页面上弹出提示对话框，
将用户输入的结果赋给变量name*/
alert(name); //输出用户输入的信息
age=prompt("你今年多大了?","请在这里输入年龄"); /*在页面上再一次弹出提示对话框，
讲用户输入的信息赋给变量age*/
alert(age)//输出用户输入的信息
</script>
</head>
</html>

运行上述程序，效果如下：

点击“确定”后，显示结果如下：

再次点击“确定”按钮：

继续点击“确定”按钮：

分析上述示例：

a、在 <script> 脚本块中使用了两个 prompt() 方法；

b、在第一个 prompt() 括号内添加了提示文本；

c、语句 name=prompt() 将用户在文本框中输入的信息赋值给变量 name；

三种对话框对比总结

alert()、confirm() 和 prompt() 的区别与联系：

警告框 alert()

alert 是警告框，仅有一个“确定”按钮，无返回值。它常用于确保用户注意到重要信息。当警告框出现后，用户必须点击“确定”才能继续操作。语法为：alert("文本")。

确认框 confirm()

confirm 是确认框，包含“确定”和“取消”两个按钮，返回 true 或 false。它用于让用户验证或确认某些信息。当确认框出现后，用户需点击相应按钮才能继续操作。如果点击“确定”，返回值为 true；如果点击“取消”，返回值为 false。语法为：confirm("文本")。

提示框 prompt()

prompt 是提示框，返回用户输入的消息或默认值。它常用于在用户进入页面前提前输入某个值。当提示框出现后，用户需输入值并点击“确定”或“取消”才能继续操作。如果点击“确定”，返回值为输入的内容；如果点击“取消”，返回值为 null。语法为：prompt("文本","默认值")。

本文主要介绍了 JavaScript 中的三种弹出对话框：alert()、confirm() 和 prompt()。文章先对各个方法进行了单独详细介绍，随后进行了对比分析。除这三种对话框外，还可以使用 document.write() 直接将消息显示在页面上。BS 学习，未完待续……同时感谢大家一直以来对本站的支持！