一、简介

SweetAlert2用于替代浏览器默认的弹出对话框，是一个美观，响应，可定制，可访问替代JAVASCRIPT的弹出框。传统的弹窗相比之下实属不好看，而SweetAlert2能帮我们解决这个问题。

二、安装

1

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

三、 快速入门

1
2

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<button type="button" id="toast">toast</button>
<button type="button" id="demo1">demo1</button>

<script type="text/javascript">
			
	$('#toast').on('click', function() {
		const Toast = Swal.mixin({
			toast: true,
			showConfirmButton: false,  // 是否展示确认按钮一般为false，为true有点难看
			timer: 3000  // 计时器
	})
				
        Toast.fire({
            type: 'success',
            title: '登录成功'
        })
	})
			
			$('#demo1').on('click', function() {
				Swal.fire({
					title: 'Error!',
					text: '是否还要继续？',
					type: 'error',  // 类型不同 展示的画面也不同
					confirmButtonText: 'Cool' , // 确认按钮 - 名字可变
				})
			})
			
		</script>

四、常用配置

title：模态的标题

text：模态的描述。如果同时提供“text”和“html”参数，则将使用“text”。

type：模态的类型。SweetAlert2附带5种内置类型，可显示相应的图标动画：warning, error, success, info, 和 question。它可以放在键“type”下的数组中，也可以作为函数的第三个参数传递。

footer: 莫代尔的页脚。可以是纯文本或HTML。

toast: 是否应将警报视为Toast通知。此选项通常与position参数和计时器耦合。Toast永远不会自动聚焦。( 如上示例)

width：模态窗口宽度，包括填充 (box-sizing: border-box).可以是px 或 %. 默认宽度为 32rem.

padding：模态窗口填充。默认填充为 1.25rem.

background：模态窗口背景（CSS背景属性）。默认背景为**’#fff’**.

position：模态窗口位置可以是**’top’**, ‘top-start’, ‘top-end’, ‘center’, ‘center-start’, ‘center-end’, ‘bottom’, ‘bottom-start’, 或 ‘bottom-end’. 默认值是 *’center’*。

timer：自动关闭模态的计时器。以ms（毫秒）为单位。

animation：默认值为true。如果设置为false，则将禁用模态CSS动画。

preConfirm：在确认之前执行的功能可以是异步（Promise-returning）或同步。

• false以防止弹出窗口关闭
• 别的传递该值作为result.value 的 Swal.fire()
• undefined 保留默认的 result.value

按键

allowEnterKey：默认值为true。如果设置为false，则用户无法通过按Enter键或空格键确认模态，除非他们手动对焦确认按钮。您还可以传递返回布尔值的自定义函数。

allowEscapeKey：默认为true。如果设置为false，则用户无法通过按键关闭模式Esc。您还可以传递返回布尔值的自定义函数，例如，如果要禁用Esc模式加载状态的键。

allowOutsideClick：默认值为true。如果设置为false，则用户无法通过单击外部来解除模态。

showConfirmButton：默认值为true。如果设置为false，则不会显示“确认”按钮。当您使用自定义HTML描述时，它会很有用。

showCancelButton：默认值为false。如果设置为true，将显示“取消”按钮，用户可以单击该按钮以关闭模式。

confirmButtonText：使用此选项可更改“确认”按钮上的文本。

cancelButtonText：使用此选项可更改”Cancel”按钮上的文本。

confirmButtonColor： 使用此选项可更改”Confirm”按钮的背景颜色。默认颜色为**#3085d6**。（其它按键类似）

五、弹出的五种类型：

六、方法

今天只有一天周末时间不用补课，再来复习复习这个前端框架！