<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SweetAlert2例子</title>
<link rel="stylesheet" >
</head>
<body>
<div class="demo_1">
帶有 確定和取消的 彈框1：
<button>點(diǎn)擊這里</button>
</div>
<div class="demo_2">
帶有 確定和取消的 彈框2:
<button>點(diǎn)擊這里</button>
</div>
<div class="demo_3">
帶有 展示 標(biāo)簽內(nèi)容 的彈框：
<button>點(diǎn)擊這里</button>
</div>
<div class="demo_4">
帶有定位 和 消失時(shí)間的 彈框：
<button>點(diǎn)擊這里</button>
</div>
<div class="demo_5">
自定義 第三方 css 的 彈框 (推薦使用 Animate.css )：
<button>點(diǎn)擊這里</button>
</div>
<div class="demo_6">
右上角 通知類 彈窗：
<button>點(diǎn)擊這里</button>
</div>
<div class="demo_7">
做 一個(gè)自己的 通用模版：
<button>點(diǎn)擊這里</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
$(".demo_1 button").click(function () {
Swal.fire({
type: 'warning', // 彈框類型
title: '注銷帳號(hào)', //標(biāo)題
text: "注銷后將無法恢復(fù)，請謹(jǐn)慎操作！", //顯示內(nèi)容
confirmButtonColor: '#3085d6',// 確定按鈕的 顏色
confirmButtonText: '確定',// 確定按鈕的 文字
showCancelButton: true, // 是否顯示取消按鈕
cancelButtonColor: '#d33', // 取消按鈕的 顏色
cancelButtonText: "取消", // 取消按鈕的 文字
focusCancel: true, // 是否聚焦 取消按鈕
reverseButtons: true // 是否 反轉(zhuǎn) 兩個(gè)按鈕的位置 默認(rèn)是 左邊 確定 右邊 取消
}).then((isConfirm) => {
try {
//判斷 是否 點(diǎn)擊的 確定按鈕
if (isConfirm.value) {
Swal.fire("成功", "點(diǎn)擊了確定", "success");
} else {
Swal.fire("取消", "點(diǎn)擊了取消", "error");
}
} catch (e) {
alert(e);
}
});
});
$(".demo_2 button").click(function () {
Swal.fire({
title: '領(lǐng)取你的尋龍裝備！',
input: 'select',
html:
'<input id="swal-input1" class="swal2-input">' +
'<input id="swal-input2" class="swal2-input">',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Look up',
showLoaderOnConfirm: true,
preConfirm: (login) => {
return fetch(`//api.github.com/users/${login}`)
.then(response => {
if (!response.ok) {
throw new Error(response.statusText)
}
return response.json()
})
.catch(error => {
Swal.showValidationMessage(
`Request failed: ${error}`
)
})
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
if (result.value) {
Swal.fire({
title: `${result.value.login}'s avatar`,
imageUrl: result.value.avatar_url
})
}
})
});
$(".demo_3 button").click(function () {
var content = "無記錄";
var msg = ""; //msg 是從外面?zhèn)魅氲臄?shù)據(jù)
if (msg) {
content = "<p style='color: red'>最近一次操作后的5小時(shí)內(nèi)有效</p> "
+ "<p>可以使用 Ctrl +F 查找關(guān)鍵字</p>"
+ "<table class='table_list'>"
+ "<tr>"
+ " <th class='js_tr_data'> 時(shí)間</th> <th>名稱</th> <th>密碼</th>"
+ "</tr>"
+ msg
+ "</table>"
}
Swal.fire({
title: '<strong>記錄</strong>',
type: 'info',
html: content, // HTML
focusConfirm: true, //聚焦到確定按鈕
showCloseButton: true,//右上角關(guān)閉
})
});
$(".demo_4 button").click(function () {
Swal.fire({
position: 'top-end', //定位 左上角
type: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
});
});
$(".demo_5 button").click(function () {
Swal.fire({
title: 'Custom animation with Animate.css',
animation: false,
customClass: 'animated tada'
})
});
$(".demo_6 button").click(function () {
Swal.fire({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
type: 'success',
title: 'Signed in successfully'
})
});
//定義模版 (可多次使用)
var MyBox = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
$(".demo_7 button").click(function () {
//調(diào)用
MyBox.fire({
type: 'success',
title: 'successfully'
});
})
});
</script>
</body>
</html>
SweetAlert2例子
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
