之前接觸到layer彈出層，今天又發現了一個非常實用的彈出層插件，它的名字叫做sweetalert.
官網地址：http://t4t5.github.io/sweetalert/
npm下載方式：npm install sweetalert
跟着教程寫了幾個demo，感覺效果還是不錯的！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="node_modules/sweetalert/dist/sweetalert.css">
<!-- <link rel="stylesheet" href="sweetalert.css"> -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="node_modules/sweetalert/dist/sweetalert.min.js"></script>
<!-- <script src="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>