簡介
SweetAlert是一款很好用的彈出框框架
下載
導入
博主用的是bootstrap-sweetalert,所以要依賴bootstrap，導入前先導入原生jQuery以及bootstrap
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
基本樣式
1、單條彈出框
swal("這是一條消息！");
2、刪除警告框（取消時不提示）
swal({
title:'你確定刪除嗎？',
text:'一旦刪除，將無法恢復！',
type:'warning',
showCancelButton:true,
confirmButtonColor:'#DD6B55',
confirmButtonText:'確定刪除！',
closeOnConfirm:false
},
function(){
swal("刪除","您的文件已經刪除","success");
}
);
3、刪除警告框（取消時提示）
swal({
title:'你確定刪除嗎？',
text:'一旦刪除，將無法恢復！',
type:'warning',
showCancelButton:true,
confirmButtonColor:'#DD6B55',
confirmButtonText:'確定刪除！',
cancelButtonText:'取消操作！',
closeOnConfirm:false,
closeOnCancel:false
},
function(isConfirm){
if(isConfirm){
swal("刪除！","您的文件已經被刪除！",'success');
}else{
swal('取消！',"您的文件是依然存在！",'error');
}
}
)
4、帶圖片的彈出框
swal({
title:'Sweet!',
text:'送你一張圖片',
imageUrl:'static/img/headpic/logo.png
' }); });
5、可插入html代碼的彈出框
swal({
title:"<h1 style='font-size:16px'>此處可以插入html</h1>",
text:'我是<span style="color:#F8BB86">文字內容</span>',
html:true
})
6、自動關閉的彈出框
swal({
title:'自動關閉彈窗',
text:'設置彈窗在2秒后關閉',
timer:2000,
showConfirmButton:false
});
7、帶輸入框的彈出框
swal({
title:'獲取輸入框中的內容',
text:'寫入一些有趣的東西吧：',
type:'input',
showCancelButton:true,
closeOnConfirm:false,
confirmButtonText:'確定',
cancelButtonText:'取消',
animation:'slide-from-top',
inputPlaceholder:'請輸入一些內容'
},
function(inputValue){
if(inputValue==false) return false;
if(inputValue==''){
swal.showInputError('你必須寫入一些東西');
return false;
}
swal('非常好','您輸入的內容是：'+inputValue,'success');
}
);
8、可以提交AJAX請求的彈出框
swal({
title:'ajax請求例子',
text:'提交ajax請求',
type:'info',
showCancelButton:true,
closeOnConfirm:false,
showLoaderOnConfirm:true
},
function(){
setTimeout(function(){
swal("ajax請求完成");
},2000);
}
);
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
<style>
</style>
</head>
<body>
<button id="btn01">點我彈出</button>
<button id="btn02">點我彈出</button>
<button id="btn03">點我彈出</button>
<button id="btn04">點我彈出</button>
<button id="btn05">點我彈出</button>
<button id="btn06">點我彈出</button>
<button id="btn07">點我彈出</button>
<button id="btn08">點我彈出</button>
<script>
$("#btn01").click(function(){
swal("這是一條消息！");
});
$("#btn02").click(function(){
swal({
title:'你確定刪除嗎？',
text:'一旦刪除，將無法恢復！',
type:'warning',
showCancelButton:true,
confirmButtonColor:'#DD6B55',
confirmButtonText:'確定刪除！',
closeOnConfirm:false
},
function(){
swal("刪除","您的文件已經刪除","success");
}
);
});
$("#btn03").click(function(){
swal({
title:'你確定刪除嗎？',
text:'一旦刪除，將無法恢復！',
type:'warning',
showCancelButton:true,
confirmButtonColor:'#DD6B55',
confirmButtonText:'確定刪除！',
cancelButtonText:'取消操作！',
closeOnConfirm:false,
closeOnCancel:false
},
function(isConfirm){
if(isConfirm){
swal("刪除！","您的文件已經被刪除！",'success');
}else{
swal('取消！',"您的文件是依然存在！",'error');
}
}
)
});
$("#btn04").click(function(){
swal({
title:'Sweet!',
text:'送你一張圖片',
imageUrl:'node_modules/sweetalert/example/images/thumbs-up.jpg'
});
});
$("#btn05").click(function(){
swal({
title:"<h1 style='font-size:16px'>此處可以插入html</h1>",
text:'我是<span style="color:#F8BB86">文字內容</span>',
html:true
})
});
$("#btn06").click(function(){
swal({
title:'自動關閉彈窗',
text:'設置彈窗在2秒后關閉',
timer:2000,
showConfirmButton:false
});
});
$("#btn07").click(function(){
swal({
title:'獲取輸入框中的內容',
text:'寫入一些有趣的東西吧：',
type:'input',
showCancelButton:true,
closeOnConfirm:false,
confirmButtonText:'確定',
cancelButtonText:'取消',
animation:'slide-from-top',
inputPlaceholder:'請輸入一些內容'
},
function(inputValue){
if(inputValue==false) return false;
if(inputValue==''){
swal.showInputError('你必須寫入一些東西');
return false;
}
swal('非常好','您輸入的內容是：'+inputValue,'success');
}
);
});
$("#btn08").click(function(){
swal({
title:'ajax請求例子',
text:'提交ajax請求',
type:'info',
showCancelButton:true,
closeOnConfirm:false,
showLoaderOnConfirm:true
},
function(){
setTimeout(function(){
swal("ajax請求完成");
},2000);
}
);
});
</script>
</body>
</html>
我的博客即將搬運同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan