一：簡介
1.什么是SweetAlert?
SweetAlert是可以替代Javascript原生的alert和confirm等函數呈現的彈出提示框，它將提示框進行了美化，並且允許自定義，支持設置提示框標題、提示類型、內容展示圖片、確認取消按鈕文本、點擊后回調函數等。
簡而言之，SweetAlert就是1款基於JS封裝的可以自定義美化的提示框。
2.官方文檔
https://www.sweetalert.cn/docs.html
3.下載地址
https://github.com/t4t5/sweetalert/archive/master.zip
二：使用
1.使用文檔
| 參數 | 默認值 | 描述 |
|---|---|---|
| title | null （必填） |
彈窗的名稱可以通過對象的 title屬性或第1個參數進行傳遞。 |
| text | null | 彈窗的描述可以通過對象的 text屬性或第2個參數進行傳遞。 |
| type | null | 有4種類型的圖標動畫："warning", "error", "success" 和 "info" 可以將它放在 type數組或通過第3個參數傳遞。 |
| allowOutsideClick | false | 如果設置為“true”，用戶可以通過點擊警告框以外的區域關閉警告框 |
| showCancelButton | false | 如果設置為“true”，“cancel”按鈕將顯示，點擊可以關閉警告框 |
| confirmButtonText | "OK" | 該參數用來改變確認按鈕上的文字如果設置為"true"，那么確認按鈕將自動將"Confirm"替換為"OK" |
| confirmButtonClass | null | 設置確認按鈕的class（可以是自定義的class） |
| confirmButtonColor | "#AEDEF4" | 該參數用來改變確認按鈕的背景顏色（必須是一個HEX值）。 |
| cancelButtonText | "Cancel" | 該參數用來改變取消按鈕的文字 |
| cancelButtonClass | null | 設置取消按鈕的class（可以是自定義的class） |
| closeOnConfirm | true | 點擊確認按鈕后模態窗口仍然保留就設置為"false"該參數在其他SweetAlert觸發確認按鈕事件時十分有用 |
| imageUrl | null | 添加自定義圖片到警告框上必須是圖片的完整路徑（本地路徑/網絡路徑） |
| imageSize | "300x120" | 設定圖片的路徑后，可以設定圖片的大小格式為兩個數字中間帶個 x符號。 |
| timer | null | 警告框自動關閉的時間，單位是ms |
| html | flase | 設置為true后，在text中可以插入HTML代碼 |
三：效果展示
1.title+text
2.4種type
3.4種彈窗效果
4.取消按鈕+文字+樣式
5.關閉彈窗
6.顯示圖片+設置彈窗自動關閉時間
7.插入HTML+確認刪除
HTML源碼
這里使用了
Bootstrap4+JQuery3.5.1+SweetAlert只需要將下面代碼復制到一個
html文件即可。
CSS、JS都使用了CDN（內容分發網絡，但是需要聯網）的方式導入，無需單獨導入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SweetAlert</title>
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="text-center col-md-2 offset-md-1" style="margin-top: 120px">
<button id="btn1-1" class="btn btn-primary btn-lg d-block m-3">效果1-1</button>
<button id="btn1-2" class="btn btn-primary btn-lg d-block m-3">效果1-2</button>
</div>
<div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
<button id="btn2-1" class="btn btn-info btn-lg d-block m-3">效果2-1</button>
<button id="btn2-2" class="btn btn-success btn-lg d-block m-3">效果2-2</button>
<button id="btn2-3" class="btn btn-warning btn-lg d-block m-3">效果2-3</button>
<button id="btn2-4" class="btn btn-danger btn-lg d-block m-3">效果2-4</button>
</div>
<div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
<button id="btn3-1" class="btn btn-danger btn-lg d-block m-3">效果3-1</button>
<button id="btn3-2" class="btn btn-warning btn-lg d-block m-3">效果3-2</button>
<button id="btn3-3" class="btn btn-success btn-lg d-block m-3">效果3-3</button>
<button id="btn3-4" class="btn btn-info btn-lg d-block m-3">效果3-4</button>
</div>
<div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
<button id="btn4-1" class="btn btn-secondary btn-lg d-block m-3">效果4-1</button>
<button id="btn4-2" class="btn btn-secondary btn-lg d-block m-3">效果4-2</button>
<button id="btn4-3" class="btn btn-primary btn-lg d-block m-3">效果4-3</button>
<button id="btn4-4" class="btn btn-primary btn-lg d-block m-3">效果4-4</button>
</div>
<div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
<button id="btn5-1" class="btn btn-success btn-lg d-block m-3">效果5-1</button>
<button id="btn5-2" class="btn btn-success btn-lg d-block m-3">效果5-2</button>
<button id="btn5-3" class="btn btn-info btn-lg d-block m-3">效果5-3</button>
<button id="btn5-4" class="btn btn-info btn-lg d-block m-3">效果5-4</button>
</div>
<div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
<button id="btn6-1" class="btn btn-danger btn-lg d-block m-3">效果6-1</button>
<button id="btn6-2" class="btn btn-danger btn-lg d-block m-3">效果6-2</button>
<button id="btn6-3" class="btn btn-warning btn-lg d-block m-3">效果6-3</button>
<button id="btn6-4" class="btn btn-warning btn-lg d-block m-3">效果6-4</button>
</div>
<div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
<button id="btn7-1" class="btn btn-danger btn-lg d-block m-3">效果7-1</button>
<button id="btn7-2" class="btn btn-danger btn-lg d-block m-3">效果7-2</button>
</div>
</div>
</div>
<script>
$('#btn1-1').click(function () {
swal('我是 Title')
})
$('#btn1-2').click(function () {
swal({
title: '我是 Title',
text: '我是 Text'
})
})
$('#btn2-1').click(function () {
swal({
title: '我是類型 Info',
type: 'info',
})
})
$('#btn2-2').click(function () {
swal({
title: '我是類型 Success',
type: 'success',
})
})
$('#btn2-3').click(function () {
swal({
title: '我是類型 Warning',
type: 'warning',
})
})
$('#btn2-4').click(function () {
swal({
title: '我是類型 Error',
type: 'error',
})
})
$('#btn3-1').click(function () {
swal({
title: '彈窗效果：砰',
animation: 'pop',
})
})
$('#btn3-2').click(function () {
swal({
title: '彈窗效果：無',
animation: 'none',
})
})
$('#btn3-3').click(function () {
swal({
title: '彈窗效果：頂部下滑',
animation: 'slide-from-top',
})
})
$('#btn3-4').click(function () {
swal({
title: '彈窗效果：底部上滑',
animation: 'slide-from-bottom',
})
})
$('#btn4-1').click(function () {
swal({
title: '不顯示取消按鈕',
})
})
$('#btn4-2').click(function () {
swal({
title: '顯示取消按鈕',
showCancelButton: 'true',
})
})
$('#btn4-3').click(function () {
swal({
title: '設置確認、取消按鈕文字',
showCancelButton: 'true',
confirmButtonText: '確定',
cancelButtonText: '取消',
})
})
$('#btn4-4').click(function () {
swal({
title: '設置確認、取消按鈕的class',
showCancelButton: 'true',
confirmButtonText: '確定',
cancelButtonText: '取消',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-outline-warning',
})
})
$('#btn5-1').click(function () {
swal({
title: '普通效果',
})
})
$('#btn5-2').click(function () {
swal({
title: '點擊其他地方 關閉彈窗',
allowOutsideClick: 'true',
})
})
$('#btn5-3').click(function () {
swal({
title: '點擊確認按鈕 關閉彈窗',
closeOnConfirm: 'true',
})
})
$('#btn5-4').click(function () {
swal({
title: '點擊確認按鈕 不關閉彈窗',
closeOnConfirm: 'false',
allowOutsideClick: 'true',
})
})
$('#btn6-1').click(function () {
swal({
title: '顯示圖片',
imageUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
})
})
$('#btn6-2').click(function () {
swal({
title: '顯示圖片+設置大小',
imageUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
imageSize: '300x110',
})
})
$('#btn6-3').click(function () {
swal({
title: '彈框0.5秒后自動關閉',
timer: 500,
})
})
$('#btn6-4').click(function () {
swal({
title: '彈框2秒后自動關閉',
timer: 2000,
})
})
$('#btn7-1').click(function () {
swal({
title: '插入HTML',
text: '' +
'<h1>我是1級標題</h1>' +
'<h2>我是2級標題</h2>' +
'<h3>我是3級標題</h3>' +
'<h4>我是4級標題</h4>' +
'<h5>我是5級標題</h5>' +
'<h6>我是6級標題</h6>'
,
html: 'true',
})
})
$('#btn7-2').click(function () {
swal({
title: '確認刪除？',
text: '刪除后將無法恢復',
showCancelButton: 'true',
confirmButtonText: '確認',
cancelButtonText: '取消',
}, function (isConfirm) {
if (isConfirm) {
setTimeout(function () {
swal({
title: '刪除成功',
type: 'success',
timer: 1000,
})
}, 200)
}
})
})
</script>
</body>
</html>