简介

在JavaScript中，常见的对话框有三种：警告框（alert）、确认框（confirm）和提示框（prompt）。

1. 警告框（alert）：用于向用户显示一条消息，并只有一个“确定”按钮。

2. 确认框（confirm）：用于让用户确认某个操作，有“确定”和“取消”两个按钮，根据用户点击的不同，返回布尔值（确定返回true，取消返回false）。

3. 提示框（prompt）：用于提示用户输入一些文本，有“确定”和“取消”两个按钮，以及一个文本输入框。点击“确定”返回输入框中的文本，点击“取消”返回null。

在 JavaScript 中，常用的对话框有三种类型，它们都是浏览器内置的全局方法：

功能介绍

警告框 (Alert)

用于显示警告信息，只有​​确定​​按钮

alert("这是一条警告信息");

确认框 (Confirm)

用于确认操作，有​​确定​​和​​取消​​按钮，返回布尔值

const result = confirm("确定要删除吗？");

if(result) {
  // 用户点击了确定

} else {
  // 用户点击了取消

}

提示框 (Prompt)

用于用户输入，包含​​确定​​、​​取消​​和​​输入框​

const name = prompt("请输入您的名字", "默认名字");

if(name !== null) {
  console.log(`您输入的名字是：${name}`);
} else {
  console.log("您取消了输入");
}

性能说明

注意事项：

1. 这些对话框会​​阻塞​​页面操作，直到用户操作

2. 样式由浏览器决定，无法自定义

3. 现代前端开发更推荐使用自定义模态框（例如通过 HTML/CSS 实现）

4. 移动端支持可能有限

替代方案（自定义对话框示例）

<!-- HTML -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <p id="message"></p>
    <input id="inputField" type="text">
    <button id="confirmBtn">确定</button>
    <button id="cancelBtn">取消</button>
  </div>
</div>

<script>
// JavaScript 控制逻辑
function showCustomPrompt(msg, callback) {
  const modal = document.getElementById('myModal');
  modal.style.display = 'block';
  
  document.getElementById('message').innerText = msg;
  
  document.getElementById('confirmBtn').onclick = () => {
    const val = document.getElementById('inputField').value;
    callback(val);
    modal.style.display = 'none';
  };
  
  document.getElementById('cancelBtn').onclick = () => {
    callback(null);
    modal.style.display = 'none';
  };
}
</script>