JavaScript 弹窗 (Alert)

JavaScript 弹出框：`alert`、`confirm`、`prompt`

JavaScript 提供了三个内置函数来创建简单的弹出对话框：alert()、confirm() 和 prompt()。它们是 window 对象的一部分，但可以直接调用。

重要提示： 虽然这些弹出框易于使用，但它们是模态的 (modal)（会阻塞页面其余部分的所有交互，直到被关闭），并且其外观由浏览器控制，而不是由你的 CSS 控制。在现代 Web 开发中，为了更好的用户体验和对外形功能的更多控制，它们通常被使用 HTML、CSS 和 JavaScript 创建的自定义样式模态对话框所取代。

警告框：`alert()`

警告框用于向用户显示一条消息。用户必须点击“确定”才能关闭它并继续与页面交互。

语法：

alert(“message text”); // or window.alert(“message text”);

示例：

alert("Welcome to our website!");

这通常用于不需要用户输入的简单通知。

确认框：`confirm()`

确认框显示一条消息，并提供两个按钮：“确定”和“取消”。它用于询问用户是/否的决定。

confirm() 函数返回一个布尔值 (boolean value)：

如果用户点击“确定”，返回 true。
如果用户点击“取消”或关闭对话框，返回 false。

语法：

const result = confirm(“question text”); // or window.confirm(“question text”);

示例：

const userConfirmed = confirm("Are you sure you want to delete this item?");

if (userConfirmed) {
  console.log("User pressed OK. Deleting item...");
  // 继续执行删除操作
} else {
  console.log("User pressed Cancel. Deletion aborted.");
  // 什么也不做或提供反馈
}

提示输入框：`prompt()`

提示输入框显示一条消息、一个供用户输入文本的输入字段，以及“确定”和“取消”按钮。它用于从用户那里获取文本输入。

prompt() 函数返回：

如果用户点击“确定”，返回用户输入的文本（作为字符串）。
如果用户点击“取消”或关闭对话框，返回 null。
如果用户点击“确定”但未输入任何文本，返回一个空字符串 ""（除非提供了默认值并且未更改）。

语法：

const userInput = prompt(“message text”, “optional default value”); // or window.prompt(“message text”, “optional default value”);

示例：

const userName = prompt("Please enter your name:", "Guest");

if (userName !== null) {
  // 用户没有点击取消
  if (userName.trim() === "") {
    console.log("Hello, anonymous user!");
  } else {
    console.log(`Hello, ${userName}! How are you today?`);
  }
} else {
  console.log("User cancelled the prompt.");
}

注意：prompt() 返回的值始终是字符串。如果你需要数字，则必须进行转换（例如，使用 parseInt() 或 Number()）。

弹出框中的换行

要在这些弹出框的消息文本中显示换行，可以使用换行符 \n。

alert("Hello!\nWelcome to our application.\nWe hope you enjoy your stay.");

替代方案：

为了提供更集成化和可定制的用户体验，考虑使用基于 HTML 的模态对话框。Bootstrap、Material UI 等库或自定义 JavaScript 解决方案可以帮助你创建与网站设计相匹配并提供更丰富交互的对话框。HTML 的 <dialog> 元素也提供了一种原生方式来创建模态对话框，并且正获得更广泛的浏览器支持。

更多信息可在 MDN 上找到：alert()、confirm()、prompt()。

JavaScript 弹窗 (Alert)

JavaScript 弹出框：alert、confirm、prompt

警告框：alert()

语法：

确认框：confirm()

语法：

提示输入框：prompt()

语法：