Sweetalert2
简介
SweetAlert可以替代JavaScript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
一个漂亮的、响应式的、可定制的和可访问（WAI-ARIA）的JAVASCRIPT弹窗
无论是在电脑、手机还是平板上，SweetAlert2都会在页面上自动居中显示
官网：**Sweetalert2**
导入CDN链接：
1
2<link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.all.js"></script>
弹窗
普通
1
2
3
4// 第一个是标题，第二个是第二行显示的字，第三个是图标
// 必须按照顺序写！
Swal.fire("失败", "已取消删除", "error");
Swal.fire('成功','已成功删除','success');高级
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
"大的提示框"
Swal.fire({
"显示的图标 有：success，error，warning，info，question"
type: 'warning',
"显示时间"
timer:1300,
"提示信息标题"
title: "你确定要删除"+tbData2.uname+"吗？",
"是否显示取消按钮"
showCancelButton: true,
"确定按钮的颜色"
confirmButtonColor: '#3085d6',
"取消按钮的颜色"
cancelButtonColor: '#d33',
"确定按钮显示的字"
cofirmButtonText: '确定删除！',
// 取消按钮显示的字
cancelButtonText: '取消'
}).then((result) => {
"如果点击了确定按就执行这里面的逻辑"
if (result.value) {
Swal.fire('成功',tbData2.uname+'已成功删除','success');
"删除数据"
$.post("/02mavenWeb/uinfo/delete",{"uid":tbData2.uid},function(){
"重载表格"
table.ajax.reload( null, false );
});
"点击了取消按钮就执行这里面的逻辑"
}else {
Swal.fire("失败", "已取消删除", "error");
}
})
"小提示框"
Swal.fire({
toast: true,
title:"标题",
"自定义图标宽度"
width:300,
showConfirmButton: false,
"显示时间"
timer:1300,
"图标"
type:"success"
});
相关文章
