如何构建JavaScript警报框或弹出窗口

Popup boxes (or dialog boxes) are modal windows used to notify or warn the user, or to get input from the user.

弹出框(或对话框)是用于通知或警告用户或从用户获取输入的模式窗口。

Popup boxes prevent the user from accessing other aspects of a program until the popup is closed, so they should not be overused.

弹出框可防止用户访问程序的其他方面，直到关闭弹出框为止，因此不应过度使用它们。

There are three different kinds of popup methods used in JavaScript: window.alert(), window.confirm() and window.prompt().

JavaScript中使用三种不同的弹出方法： window.alert() ， window.confirm()和window.prompt() 。

警报 (Alert)

The alert method displays messages that don’t require the user to enter a response. Once this function is called, an alert dialog box will appear with the specified (optional) message. Users will be required to confirm the message before the alert goes away.

警报方法显示不需要用户输入响应的消息。 调用此函数后，将显示一个警告对话框，其中包含指定的(可选)消息。 在警报消失之前，将要求用户确认消息。

例： (Example:)

window.alert("Welcome to our website");

window.alert("Welcome to our website");

确认 (Confirm)

The confirm method is similar to window.alert(), but also displays a cancel button in the popup. The buttons return boolean values: true for OK and false for Cancel.

确认方法类似于window.alert() ，但还在弹出窗口中显示一个取消按钮。 按钮返回布尔值：“确定”为true，为“取消”为false。

例： (Example:)

var result = window.confirm('Are you sure?');
if (result === true) {
    window.alert('Okay, if you're sure.');
} else { 
    window.alert('You seem uncertain.');
}

提示 (Prompt)

The prompt method is typically used to get text input from the user. This function can take two arguments, both of which are optional: a message to display to the user and a default value to display in the text field.

提示方法通常用于从用户获取文本输入。 该函数可以使用两个参数，这两个参数都是可选的：向用户显示的消息以及在文本字段中显示的默认值。

例： (Example:)

var age = prompt('How old are you?', '100');

var age = prompt('How old are you?', '100');

其他设计选项： (Other Design Options:)

If you are unhappy with the default JavaScript popups, you can substitute in various UI libraries. For example, SweetAlert provides a nice replacement for standard JavaScript modals. You can include it in your HTML via a CDN (content delivery network) and begin use.

如果您对默认JavaScript弹出窗口不满意，则可以替换各种UI库。 例如，SweetAlert为标准JavaScript模态提供了很好的替代。 您可以通过CDN(内容交付网络)将其包含在HTML中并开始使用。

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

The syntax is as such: swal(title, subtitle, messageType)

语法是这样的： swal(title, subtitle, messageType)

swal("Oops!", "Something went wrong on the page!", "error");

The above code will produce the following popup:

上面的代码将产生以下弹出窗口：

SweetAlert is by no means the only substitute for standard modals, but it is clean and easy to implement.

SweetAlert绝不是标准模态的唯一替代品，但它干净且易于实现。

更多信息： (More Information:)

• MDN window.alert()

  MDN window.alert()

• MDN window.confirm()

  MDN window.confirm()

• MDN window.prompt()

  MDN window.prompt()

翻译自: https://www.freecodecamp.org/news/how-to-build-a-javascript-alert-box-or-popup-window/