想必你已經受夠了單調的alert彈窗吧?
爲了更好的用戶體驗性,現在介紹一款漂亮的彈窗口插件——sweetAlert,現在就來介紹它的使用
1、首先在官網下載它的CSS和JavaScript文件:http://mishengqiang.com/sweetalert/
或者在評論區留下郵箱, 免費贈送
2、在頁面的頭部初始化插件
<script src="dist/sweetalert.min.js"></script> //改成自己保存的路徑 *下同
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
3、頁面加載完成後調用sweetAlert函數
最基本的調用方法:
swal("手機號碼不能爲空", "請輸入要發放用戶的手機號!", "error");
會看到:
帶錯誤提示框的彈窗:
swal("Oops...", "Something went wrong!", "error");
4、用到項目中:
a、刪除時的彈窗:
<button class="btn btn-danger btn-xs del" onClick="check({{$v['id']}})">刪除</button>
JS代碼:
<script>
function check(id){
swal(
{title:"您確定要刪除這條數據嗎",
text:"刪除後將無法恢復,請謹慎操作!",
type:"warning",
showCancelButton:true,
confirmButtonColor:"#DD6B55",
confirmButtonText:"確定刪除!",
cancelButtonText:"取消",
closeOnConfirm:false,
closeOnCancel:false
},
function(isConfirm)
{
if(isConfirm)
{
swal({title:"刪除成功!",
text:"您已經永久刪除了這條數據。",
type:"success"},function(){window.location="/video/destroy/"+id})
}
else{
swal({title:"已取消",
text:"您取消了刪除操作!",
type:"error"})
}
}
)
}
</script>
點擊刪除時彈出:
點取消:
點確認刪除:
b、添加/修改數據成功時彈窗
前面最下面添加JS代碼:如果刪除成功則彈窗,點擊確定跳到首頁(可自定義)
@if(Session::get('success')) <script> swal({title:"保存成功!", text:"已成功保存數據", type:"success"},function(){window.location="/"} ) </script> @endif
控制器:如果數據添加成功則返回上一頁並將數據帶回,存入一次性session
if ($res) { return redirect()->back()->withInput()->with('success','保存成功!'); }
成功則彈出提示,點擊OK返回首頁
6、就介紹這麼多了,更多用法可參照官網
7.點擊查看最美示例
10:當然也不免有土豪 :積分多的可以點此鏈接下載
https://download.csdn.net/download/dreamweaver_zhou/10467902