sweetalert

SweetAlert详解

官方给出得SweetAlert介绍是  SweetAlert可以代替JavaScript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。我用过之后觉得确实好用，因此极力推荐此插件。我将它的用法总结如下：

弹出一个alert的写法：

其一： swal("恭喜","添加成功","success"); 第一个参数是title，第二个参数是text，第三个参数是提醒类型（success,error,warning,input）三个参数皆非必写项。最简便写法：swal("");就弹出一个框，上面有个确定按钮。不可写作：

  swal();             其二：

                      swal({

                                     title：“恭喜”，

                                     text：“添加成功”，

                                     type：“success”

                                });

sweetalert的使用

1.swal()方法中的参数：

2.引入css与js，通过cdn加速服务

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

3.常用

1.

swal("Pikachu fainted! You gained 500 XP!");

2.

1 2 3 4 5 6

swal({ title : "支付成功", type : "success", confirmButtonText : "确定", closeOnConfirm : false });

结果

 

　3.

1	swal("删除失败","重新操作",'error');

　　效果：

 

　4.

1 2 3 4 5 6 7 8 9 10 11 12

swal({ title:'', text:"请扫描用户手机上的付款码", type:'input', showCancelButton: true, closeOnConfirm: false, cancelButtonText: "取 消", confirmButtonText: "确 认", imageUrl:'../../../../img/scancode.gif', inputPlaceholder:"请填写付款码数字", showLoaderOnConfirm:true                })

　　运行结果

5.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

swal({             title:"是否删除",             text:"",             type:"warning",             showCancelButton:true,//是否显示取消按钮             cancelButtonText:'取 消',//按钮内容             cancelButtonColor:'#b9b9b9',               showConfirmButton:true,             confirmButtonText:'确 认',             confirmButtonColor:"#dd6b55",               closeOnConfirm:false,//点击返回上一步操作             closeOnCancel:true         },function(){//正确按钮进行的操作点             $.ajax({                 url: './test.json',                 type: 'post',                 dataType: 'json',                 data: {"id": $('#inp').val()},             })             .done(function(res) {                 if (!$('#inp').val()) {                     swal("输入内容哦……");                     return;                 }                 if (res.status == '000') {                     swal('删除成功','请继续操作','success');                     return;                 }else{                     swal('删除失败','','error');                 }                 // console.log("success");             })             .fail(function() {//连接服务器失败进行的操作                 console.log("error");             })             .always(function() {                 console.log("complete");             });                       });

　　

6.确认输入

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

swal({                         title:'',                         text:"请扫描用户手机上的付款码",                         type:'input',                         showCancelButton: true,                         closeOnConfirm: false,                         cancelButtonText: "取 消",                         confirmButtonText: "确 认",                         imageUrl:'../../../../img/scancode.gif',                         inputPlaceholder:"请填写付款码数字",                         showLoaderOnConfirm:true                     },function(inputValue){                         if (inputValue == '') {                             swal.showInputError('请填写付款码数字');                             return;                         }                         if (inputValue == false) {                             swal('','','success');                             return;                         }                                                   swal('ok');                     });

　　效果：

 

练习sweetalert请参考参考： http://mishengqiang.com/sweetalert/