JavaScript 基础（三）：浏览器原生交互弹窗

浏览器原生交互弹窗

与用户交互的 3 个浏览器的特定函数：

• alert(message)：消息。显示一个带有文本消息和确定按钮的模态窗口。

  • message：要显示的文本

  alert("Hello");
  

• prompt(title, [default])：提问。显示一个带有文本消息、input 框、确定和取消两个按钮的模态窗口。

  • title：显示给用户的文本
  • default：可选，指定 input 框的初始值。
  • 返回用户输入的内容，如果用户取消了输入（点击取消或按下 Esc 键），则返回 null。

  let userName = prompt("Your name?", "una");
  alert( userName ); // 显示用户输入的名字
  

  IE 浏览器会提供默认值

  第二个参数是可选的。但是如果我们不提供的话，Internet Explorer 会把 "undefined" 插入到 prompt。

  所以，为了 prompt 在 IE 中有好的效果，建议始终提供第二个参数。

• confirm(question)：确定/取消操作。显示一个带有 question 以及确定和取消两个按钮的模态窗口。

  • question：显示的问题
  • 点击确定返回 true，点击取消返回 false。

let isBoss = confirm("Are you the boss?");
alert( isBoss ); // 如果“确定”按钮被按下，则显示 true

这些方法都是模态的：它们暂停脚本的执行，并且不允许用户与该页面的其余部分进行交互，直到窗口被解除。

上述所有方法共有两个限制：

• 模态窗口的确切位置由浏览器决定。通常在页面中心。
• 窗口的确切外观也取决于浏览器。我们不能修改它。

这就是简单的代价。还有其他一些方法可以显示更漂亮的窗口，并与用户进行更丰富的交互，但如果“花里胡哨”不是非常重要，那使用本节讲的这些方法也挺好。