js弹窗dialog的使用

## 弹窗dialog的基本概念

弹窗dialog指的是页面中弹出来的对话框，一般用于提示用户、编辑数据等操作。常见的弹窗dialog有以下几种类型：

- 提示框（Alert box）：用于向用户显示一条消息，并等待用户用“OK”按钮响应。

- 确认框（Confirm box）：用于向用户显示一条消息，并等待用户用“OK”或“Cancel”按钮响应，返回值为一个布尔值（true或false）。

- 输入框（Prompt box）：用于向用户显示一条消息，并等待用户输入一段文本，返回值为用户输入的文本内容。

- 自定义对话框（Custom dialog）：这种对话框在界面和交互上与其他对话框不同，因为它们可以包含自定义的 HTML、CSS 和 JavaScript 代码，可以实现更为复杂的页面效果。

## 使用原生JavaScript实现弹窗dialog

### 实现提示框（Alert box）

Alert box是最简单的弹窗dialog，它用于向用户显示一条消息，并等待用户用“OK”按钮响应。要实现Alert box，我们可以使用JS内置的`alert()`方法。

```javascript

alert("Hello World!");

```

当这段代码被执行时，将会弹出一个带有“OK”按钮的提示框，显示“Hello World!”这条消息。代码执行会被阻塞，直到用户按下“OK”按钮。


### 实现确认框（Confirm box）

Confirm box用于向用户显示一条消息，并等待用户用“OK”或“Cancel”按钮响应，返回值为一个布尔值（true或false）。要实现Confirm box，我们可以使用JS内置的`confirm()`方法。

```javascript

if (confirm("Are you sure?")) {

alert("You clicked OK!");

} else {

alert("You clicked Cancel!");

}

```

当这段代码被执行时，将会弹出一个带有“OK”和“Cancel”按钮的确认框，显示“Are you sure?”这条消息。如果用户按下“OK”按钮，弹窗的返回值为true，如果用户按下“Cancel”按钮，弹窗的返回值为false。根据返回值我们可以进行相应的操作。


### 实现输入框（Prompt box）

Prompt box用于向用户显示一条消息，并等待用户输入一段文本，返回值为用户输入的文本内容。要实现Prompt box，我们可以使用JS内置的`prompt()`方法。

```javascript

let name = prompt("What is your name?");

if (name) {

alert("Hello, " + name + "!");

} else {

alert("Hello!");

}

```

当这段代码被执行时，将会弹出一个带有输入框、"OK"和"Cancel"按钮的对话框，提示用户输入“What is your name?”这条消息。如果用户点击了"OK"按钮并且输入了文本，弹窗的返回值为用户输入的文本，否则返回null。我们可以根据返回值进行相应的操作。


### 实现自定义对话框（Custom dialog）

自定义对话框可以包含自定义的 HTML、CSS 和 JavaScript 代码，可以实现比较复杂的页面效果。要实现自定义对话框，我们需要使用HTML、CSS和JavaScript代码实现外观和交互效果。

举个例子，我们可以实现一个自定义对话框，用于提示用户是否删除一个选定的项目。对话框中包含一个提示信息和两个按钮（“确定”和“取消”）。

```html

```

这段代码包含了一个带有自定义样式的删除对话框。当页面加载时，它会自动显示在屏幕中央，等待用户点击“确定”或“取消”按钮。当用户点击一个按钮时，对话框会被隐藏。


## 使用第三方库实现弹窗dialog

我们也可以使用第三方库来实现弹窗dialog，这些库往往提供了更加丰富的功能和更为方便的使用方式。这里介绍三个常用的第三方库。

### Bootstrap Modal

Bootstrap Modal是一个基于Bootstrap框架的弹窗组件，它提供了许多配置选项和事件处理函数，可以方便地定制弹窗的外观和交互。

```html

Launch demo modal

```

在这个例子中，我们使用了Bootstrap框架，并创建了一个按钮，当它被点击时，会打开一个弹窗。这个弹窗使用了Bootstrap Modal，并包含了标题、主体和底部按钮。


### SweetAlert2

SweetAlert2是一个基于JavaScript的弹窗库，它提供了丰富的配置选项和动画效果，可以方便地定制弹窗的外观和交互。SweetAlert2也提供了很多事件处理函数，可以监听按钮点击、弹窗显示和隐藏等事件。

```html

Show Alert

```

在这个例子中，我们使用了SweetAlert2库，并创建了一个“Show Alert”按钮。当这个按钮被点击时，会弹出一个弹窗，询问用户是否确认删除一个文件。如果用户点击了“确定”按钮，弹窗会隐藏，并显示一个成功消息。


### Modal Dialog

Modal Dialog是一个基于JavaScript的弹窗库，它支持多种类型的弹窗，包括提示框、确认框、输入框和自定义对话框等。它提供了类似Bootstrap Modal的配置选项和事件处理函数，可以方便地定制弹窗的外观和交互。

```html

Show Alert

```

在这个例子中，我们使用了Modal Dialog库，并创建了一个“Show Alert”按钮。当这个按钮被点击时，会弹出一个提示框，显示“Hello World!”这条消息。


## 总结

弹窗dialog在Web应用程序中是非常常见的一种UI组件，它可以方便地向用户显示信息并接受用户输入。原生JavaScript提供了几个内置的弹窗dialog函数（alert、confirm和prompt），它们非常简单和易用，但是外观和交互有限。第三方库（如Bootstrap Modal、SweetAlert2和Modal Dialog）可以提供更为丰富的弹窗dialog功能和更加方便的使用方式，也可以方便地定制弹窗的外观和交互。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/