1.简介
SweetAlert是一款很好用的弹出框框架
需要jQurey 与 bootstrap文件
https://github.com/lipis/bootstrap-sweetalert
2.准备环境
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SweetAlert</title>
<!--0. 令牌-->
{% load static %}
<!--1. 导入jQuery 文件-->
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<!--2. 导入bootstrap css 文件-->
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<!--3. 导入bootstrap css 文件-->
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<!--5. 导入 sweetalert js文件-->
<script src="{% static 'dist/sweetalert.js' %}"></script>
<!--6. 导入 sweetalert css文件-->
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
</head>
<body>
<script>
// 7. SweetAlert代码 ↓
</script>
</body>
</html>
3. 单条弹出框
swal("你有一封邮件,请查收!");
![image-20220316144232738](https://img-blog.csdnimg.cn/img_convert/c788ac03b4cbee616df5f12cd1a16c7b.png)
4. 删除警告框 (没有取消提示)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file</title>
<!--0. 令牌-->
{% load static %}
<!--1. 导入jQuery 文件-->
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<!--2. 导入bootstrap css 文件-->
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<!--3. 导入bootstrap css 文件-->
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<!--5. 导入 sweetalert js文件-->
<script src="{% static 'dist/sweetalert.js' %}"></script>
<!--6. 导入 sweetalert css文件-->
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
<style>
div.sweet-alert h2 {
padding-top: 10px;
}
</style>
</head>
<body>
<script>
swal({
title: '你确定删除吗?',
text: '删除之后清除所有数据!',
// 警告类型 控制图标颜色
type: 'warning',
// 显示取消按钮
showCancelButton: true,
// 按钮文字
confirmButtonText: '确定删除!',
// 关闭按钮不显示
closeOnConfirm: false
},
function () { // success 控制图标动画
swal("删除成功", "想要找回请在3小时内联系管理员!", "success");
}
);
</script>
</body>
</html>
![3](https://img-blog.csdnimg.cn/img_convert/9ccb55df7a51f4c69db299769aa7f8af.gif)
success 属性设置的图标太大将标题给遮住了,为标题设置 padding-top.
/* 代代码中 */
div.sweet-alert h2 {
padding-top: 10px;
}
![image-20220316150926248](https://img-blog.csdnimg.cn/img_convert/7cec63c525e9aeb8c0ec4c431ae0a5ce.png)
![4](https://img-blog.csdnimg.cn/img_convert/938fc9037f2b2622aaea25d024174cda.gif)
5 删除警告框(取消提示)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sweetalert</title>
<!--0. 令牌-->
{% load static %}
<!--1. 导入jQuery 文件-->
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<!--2. 导入bootstrap css 文件-->
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<!--3. 导入bootstrap css 文件-->
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<!--5. 导入 sweetalert js文件-->
<script src="{% static 'dist/sweetalert.js' %}"></script>
<!--6. 导入 sweetalert css文件-->
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
</head>
<body>
<script>
swal({
title: '你确定删除吗?',
text: '删除之后清除所有数据!',
type: 'warning',
showCancelButton: true,
confirmButtonText: '确定删除!',
cancelButtonText: '取消操作!',
showLoaderOnConfirm:true,
// 需要点 ok 关闭弹框
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
swal("删除成功", "想要找回请在3小时内联系管理员!", "success");
} else {
swal('取消成功!', "已经撤销你的操作", 'error');
}
}
)
</script>
</body>
</html>
6. 删除警告框(带延时动态)
在等待后端发送数据的时候,会一直有等待动画效果.
后端处理太快看不见效果可以添加一个延时.
// 后端延时
setTimeout(function () {
swal();
}, 2000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sweetalert</title>
<!--0. 令牌-->
{% load static %}
<!--1. 导入jQuery 文件-->
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<!--2. 导入bootstrap css 文件-->
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<!--3. 导入bootstrap css 文件-->
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<!--5. 导入 sweetalert js文件-->
<script src="{% static 'dist/sweetalert.js' %}"></script>
<!--6. 导入 sweetalert css文件-->
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
<style>
div.sweet-alert h2 {
padding-top: 10px;
}
</style>
</head>
<body>
<script>
swal({
title: '你确定删除吗?',
text: '删除之后清除所有数据!',
type: 'warning',
showCancelButton: true,
confirmButtonText: '确定删除!',
cancelButtonText: '取消操作!',
showLoaderOnConfirm: true,
// 需要点 ok 关闭弹框
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
// 延时
setTimeout(function () {
swal("删除成功", "想要找回请在3小时内联系管理员!", "success");
}, 2000);
} else {
swal('取消成功!', "已经撤销你的操作", 'error');
}
},
)
</script>
</body>
</html>
![123](https://img-blog.csdnimg.cn/img_convert/0a00619e66eaa198b7fc248e0b7cc20a.gif)
7. 带图片的弹出框
![image-20220316153017648](https://img-blog.csdnimg.cn/img_convert/325a7954e74ec005de63c454e2063f58.png)
图片地址:
https://s2.loli.net/2022/03/16/5kA7B2qzhed4fH3.png
图书是
swal({
title: '女王大人',
text: '来电话了!',
imageUrl: 'https://s2.loli.net/2022/03/16/5kA7B2qzhed4fH3.png '
});
![6](https://img-blog.csdnimg.cn/img_convert/f847e59d2c291a432d46155982545ae9.gif)
8. 可插入html代码的弹出框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sweetalert</title>
<!--0. 令牌-->
{% load static %}
<!--1. 导入jQuery 文件-->
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<!--2. 导入bootstrap css 文件-->
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<!--3. 导入bootstrap css 文件-->
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<!--5. 导入 sweetalert js文件-->
<script src="{% static 'dist/sweetalert.js' %}"></script>
<!--6. 导入 sweetalert css文件-->
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
</head>
<body>
<script>
swal({
title: '<h1>一个神秘的链接</h1>',
text: "<a href='https://s2.loli.net/2022/03/16/5kA7B2qzhed4fH3.png'>点我<a>",
// 文本中可以使用html标签
html: true
})
</script>
</body>
</html>
![GIF 2022-3-16 15-41-23](https://img-blog.csdnimg.cn/img_convert/156a679cc6f0d4ff529d67023910cade.gif)
9. 自动关闭的弹出框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sweetalert</title>
<!--0. 令牌-->
{% load static %}
<!--1. 导入jQuery 文件-->
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<!--2. 导入bootstrap css 文件-->
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<!--3. 导入bootstrap css 文件-->
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<!--5. 导入 sweetalert js文件-->
<script src="{% static 'dist/sweetalert.js' %}"></script>
<!--6. 导入 sweetalert css文件-->
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
</head>
<body>
<script>
swal({
title:'正在关机',
text:'倒数2秒...',
// 计时
timer:2000,
// 不需要 手动点击 ok
showConfirmButton:false,
});
</script>
</body>
</html>
![GIF 2022-3-16 15-57-54](https://img-blog.csdnimg.cn/img_convert/a81c7c8bc1555a7ea4afda81034b034a.gif)
10. 弹出框输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sweetalert</title>
<!--0. 令牌-->
{% load static %}
<!--1. 导入jQuery 文件-->
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<!--2. 导入bootstrap css 文件-->
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<!--3. 导入bootstrap css 文件-->
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<!--5. 导入 sweetalert js文件-->
<script src="{% static 'dist/sweetalert.js' %}"></script>
<!--6. 导入 sweetalert css文件-->
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
</head>
<body>
<script>
swal({
title: '修改密码',
text: '你的名字:',
type: 'input',
// 展示取消按钮
showCancelButton: true,
// 关闭确认
closeOnConfirm: false,
confirmButtonText: '确定',
cancelButtonText: '取消',
// 动画
animation: 'slide-from-top',
inputPlaceholder: '输入答案'
},
function (inputValue) { // 输入的数据被 inputValue 接收
if (inputValue == false) {
swal.showInputError('不能为空');
return false;
}
swal('以提交', '您输入的内容是:' + inputValue, 'success');
}
);
</script>
</body>
</html>
![GIF 2022-3-16 16-17-09](https://img-blog.csdnimg.cn/img_convert/9f0ccf5718c8101b21c382302961361a.gif)
11.弹出框提交ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sweetalert</title>
<!--0. 令牌-->
{% load static %}
<!--1. 导入jQuery 文件-->
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<!--2. 导入bootstrap css 文件-->
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<!--3. 导入bootstrap css 文件-->
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<!--5. 导入 sweetalert js文件-->
<script src="{% static 'dist/sweetalert.js' %}"></script>
<!--6. 导入 sweetalert css文件-->
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
<style>
div.sweet-alert h2 {
padding-top: 10px;
}
</style>
</head>
<body>
<script>
swal({
title:'提交数据',
text:'ajax请求',
type:'info',
showCancelButton:true,
closeOnConfirm:false,
showLoaderOnConfirm:true
},
function(){
$.ajax({
url:'/aleat/',
type:'post',
data: {'msg': 'ajax请求'},
success:function (args) {
alert(args.msg)
}
})
// 延时
setTimeout(function(){
swal("ajax请求完成");
},2000);
}
);
</script>
</body>
</html>
# urls.py aleat请求
url('^aleat/', views.aleat),
# views.py
def aleat(request):
if request.is_ajax():
print(request.POST)
data = {'code': 200, 'msg': '我收到了ajax请求!'}
from django.http import JsonResponse
return JsonResponse(data)
return HttpResponse('OK')
![12](https://img-blog.csdnimg.cn/img_convert/67ef5e775ca1a2ceee1a7d88c835edd0.gif)