JavaScript原生三种弹窗：alert、confirm与prompt详解

原生弹窗类型概览

JavaScript提供了几种基础的模态窗口（Modal Windows），它们会阻塞浏览器主线程并中断用户当前的操作，直到用户做出响应。主要包含以下三种：

• alert（警告框）：仅显示提示信息，必须由用户点击确定关闭，无法自定义样式。
• confirm（选择框）：提供“确定”和“取消”两个选项，用于获取用户的二选一决策。
• prompt（信息录入框）：允许用户输入文本，适用于简单的数据收集。

第1步：使用警告框（alert）

目的：向用户展示重要消息或错误提示，且必须等待用户知晓后方可继续。

操作说明：直接调用window.alert方法即可，通常绑定在按钮点击事件中。

<script>
function myFunction() {
    alert("你好，我是一个警告框！");
}
</script>

第2步：使用确认选择框（confirm）

目的：在执行危险操作（如删除）或关键步骤前，要求用户明确确认意图。

操作说明：调用confirm并判断返回值。返回布尔值 true 代表用户点击确定，false 代表点击取消。

<script>
function confirmAction() {
    var result = confirm("按下按钮!");
    if (result == true) {
        document.getElementById("demo1").innerHTML = "你按下了\"确定\"按钮!";
    } else {
        document.getElementById("demo1").innerHTML = "你按下了\"取消\"按钮!";
    }
}
</script>

第3步：使用信息录入框（prompt）

目的：获取用户的简短文本输入，例如用户名、搜索关键词等。

操作说明：prompt接受两个参数：提示信息和默认值。若用户未取消，则返回输入的字符串；若取消或关闭窗口，则返回 null。

<script>
function getInput() {
    var person = prompt("请输入你的名字", "Harry Potter");
    // 检查用户是否点击了取消或关闭
    if (person != null && person != "") {
        document.getElementById("demo2").innerHTML = "你好 " + person + "!";
    }
}
</script>

以上就是 JavaScript 几种原生弹窗的详细使用指南。虽然现代开发多推荐使用自定义组件以适配统一UI风格，但掌握这三种原生API仍是前端基础的重要组成部分。更多关于 JavaScript 弹窗技术的内容请关注本站其它相关文章！