SweetAlert是一款很好用的彈出框框架
需要jQurey 與 bootstrap文件
https://github.com/lipis/bootstrap-sweetalert
<!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>
swal("你有一封郵件,請查收！");
<!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>
bootstrap前端框架模板？
success 屬性設置的圖標太大將標題給遮住了,為標題設置 padding-top.
/* 代代碼中 */
div.sweet-alert h2 {padding-top: 10px;
}
<!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>
在等待后端發送數據的時候,會一直有等待動畫效果.
后端處理太快看不見效果可以添加一個延時.
// 后端延時
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>
圖片地址:
https://s2.loli.net/2022/03/16/5kA7B2qzhed4fH3.png
圖書是
swal({title: '女王大人',text: '來電話了!',imageUrl: 'https://s2.loli.net/2022/03/16/5kA7B2qzhed4fH3.png '});
<!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>
<!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,// 不需要 手動點擊 okshowConfirmButton:false,});
</script>
</body>
</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: '修改密碼',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>
<!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 JsonResponsereturn JsonResponse(data)return HttpResponse('OK')
版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间：8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态
