漂亮的彈窗口插件——sweetAlert的使用

想必你已經受夠了單調的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函數

最基本的調用方法：

sweetAlert("Hello world!");

會看到：

帶錯誤提示框的彈窗：

sweetAlert("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、就介紹這么多了，更多用法可參照官網