JavaScript 对话框：alert、prompt、confirm 详解

JavaScript 对话框：alert、prompt、confirm 详解

JavaScript 提供了三种基本的浏览器对话框，用于与用户进行简单交互。这些方法都是 window 对象的方法，但通常可以省略 window. 前缀。

1. alert() - 警告框

功能

显示一个带有指定消息和"确定"按钮的警告框。

语法

alert(message);

使用示例

alert("操作已成功完成！");

// 换行使用\n
alert("第一行\n第二行");

特点

• 阻塞代码执行，直到用户点击确定
• 仅显示信息，不获取用户输入
• 样式不可自定义（由浏览器决定）

2. confirm() - 确认框

功能

显示一个带有指定消息、"确定"和"取消"按钮的对话框。

语法

let result = confirm(message);

使用示例

let shouldDelete = confirm("确定要删除这条记录吗？");
if (shouldDelete) {
    console.log("记录已删除");
} else {
    console.log("操作已取消");
}

特点

• 返回布尔值：true（确定）或 false（取消）
• 同样会阻塞代码执行
• 常用于重要操作前的二次确认

3. prompt() - 输入框

功能

显示一个带有指定消息、输入框、"确定"和"取消"按钮的对话框。

语法

let result = prompt(message, defaultText);

使用示例

let name = prompt("请输入您的名字", "张三");
if (name !== null) {
    console.log(`你好，${name}`);
} else {
    console.log("用户取消了输入");
}

特点

• 返回字符串（用户输入）或 null（用户取消）
• 第二个参数可选，指定输入框的默认值
• 用户输入可以作为纯文本获取

比较表格

注意事项

1. 用户体验：

   • 这些对话框会导致阻塞，可能影响用户体验。现代Web应用应尽量减少使用
   • 考虑使用自定义模态框替代

2. 样式限制：

   • 对话框外观由浏览器决定，无法自定义
   • 按钮文本通常也无法更改（特别是国际化场景）

3. 阻塞特性：

   console.log("开始");
   alert("等待用户确认");
   console.log("结束"); // 只有在用户点击确定后才会执行
   

4. 移动端差异：

   • 在移动设备上，对话框可能表现不同
   • 某些移动浏览器可能会阻止频繁出现的对话框

5. 替代方案：

   // 使用自定义对话框
   function showCustomAlert(message) {
       const dialog = document.createElement("div");
       dialog.innerHTML = `
           <div class="dialog-overlay">
               <div class="dialog">
                   <p>${message}</p>
                   <button class="confirm-btn">确定</button>
               </div>
           </div>
       `;
       document.body.appendChild(dialog);
   }
   

实际应用示例

// 简单的用户认证流程
let username = prompt("请输入用户名");
if (username) {
    let password = prompt("请输入密码");
    if (password) {
        let isCorrect = confirm(`确认提交?\n用户名: ${username}\n密码: ${password}`);
        if (isCorrect) {
            alert("信息已提交");
        } else {
            alert("提交已取消");
        }
    } else {
        alert("密码不能为空");
    }
} else {
    alert("用户名不能为空");
}

虽然这些对话框方法简单易用，但在现代Web开发中应谨慎使用，特别是在生产环境中。对于更复杂的交互，建议使用HTML/CSS创建自定义对话框组件。