JS弹出对话框交互

在JavaScript中，弹出对话框是一种与用户进行交互的常见方式。JavaScript 提供了三种内置的对话框函数：alert()、confirm() 和 prompt()。这些函数都会暂停脚本的执行，直到用户与对话框进行了交互（如点击了按钮）。

1. alert() 对话框

alert() 函数用于显示一个带有消息和一个“确定”按钮的警示框。这是最简单的对话框，通常用于显示通知或警告信息。

alert("这是一个警示框！");

当用户看到这个对话框时，他们必须点击“确定”按钮才能继续。

2. confirm() 对话框

confirm() 函数显示一个带有消息、一个“确定”按钮和一个“取消”按钮的确认框。这个函数返回一个布尔值：如果用户点击“确定”，则返回 true；如果用户点击“取消”，则返回 false。

var userConfirmed = confirm("你确定要继续吗？");
if (userConfirmed) {
    // 用户点击了“确定”
} else {
    // 用户点击了“取消”
}

3. prompt() 对话框

prompt() 函数显示一个带有消息、一个文本输入框、一个“确定”按钮和一个“取消”按钮的提示框。这个函数返回用户输入在文本输入框中的文本（如果用户点击了“确定”）；如果用户点击了“取消”，则返回 null。

var userInput = prompt("请输入你的名字：");
if (userInput !== null) {
    // 用户输入了内容并点击了“确定”
    alert("你好, " + userInput + "!");
} else {
    // 用户点击了“取消”
    alert("你取消了输入。");
}

注意事项

• 这些对话框函数都是同步执行的，会阻塞后续JavaScript代码的执行，直到用户与对话框进行了交互。
• 在现代Web开发中，这些内置的对话框函数并不常用于生产环境，因为它们会打断用户的浏览体验。相反，开发者更倾向于使用自定义的模态框（modal）来实现类似的交互效果，这些模态框可以通过CSS和JavaScript进行样式和行为的定制。
• 在某些情况下，如用户禁用了JavaScript或使用了某些浏览器扩展，这些对话框可能无法正常显示。

尽管有这些限制和注意事项，内置的对话框函数在开发过程中仍然非常有用，特别是在快速原型制作和调试时。