sweetalert弹框插件

最近做项目的时候有用到这个 sweetalert插件，但是取消按钮一直出不来，官网查看后发下换了写法。如下：

一、准备工作

• 引入插件，下载：http://mishengqiang.com/sweetalert/

<script src="dist/sweetalert.min.js"></script> 
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

二、具体内容（分sweetalert1和sweetalert2）

1.sweetalert1的弹框写法如下：

  swal(
         {
            title : '取消工作请求：'+wr_id,
            text : "这个操作在其他工作开始之前取消了请求，取消一个请求会结束请求流程",
            type : "warning",
            showCancelButton : true,
            confirmButtonColor : '#DD6B55',
            confirmButtonText : 'Yes',
            cancelButtonText : "No",
            closeOnConfirm : true
        },
           function(isConfirm) //主要是这里，这是sweetalert1的写法
                {
                    if(isConfirm)
                    {
                        swal({
                            title:"取消成功！",
                            type:"success"
                            }, function(){window.location="<tag:root/>/base/workAction/queryWrList.do?wr_id="+wr_id})
                    }
                    else{
                        swal({
                              title:"已取消",
                              type:"error"
                          })
                    }
                }
            )

2.sweetalert2的弹框写法如下：

swal(
      {
            title : '取消工作请求：'+wr_id,
            text : "这个操作在其他工作开始之前取消了请求，取消一个请求会结束请求流程",
            type : "warning",
            showCancelButton : true,
            confirmButtonColor : '#DD6B55',
            confirmButtonText : 'Yes',
            cancelButtonText : "No",
            closeOnConfirm : true
        }).then( //这是sweetalert2的写法
              function (dismiss) {
                if(dismiss == true){
                  $.post('<tag:root/>/base/workAction/updateWrStatus.do',{'wr_id':  wr_id,'status': 'Can'})
                     .done(function (data) {
                            if(data == 'true'){
                                   javascript:window.location.href="<tag:root/>/base/workAction/queryWrList.do?wr_id="+wr_id;
                            }else{
                                  swal('取消失败');
                                        }
                                  });
                    }else{
                                    
                    }
              }
        )

但是当我用了sweetalert2的写法以后取消按钮一直出不来，网上找了很多资料也没有解决问题，如下图所示：

1.png

后来看了官网的写法，终于出来了，代码改成如下：

        swal({
                        title : '取消工作请求：'+wr_id,
                        text : "这个操作在其他工作开始之前取消了请求，取消一个请求会结束请求流程",
                        icon : "warning",
                        buttons: {//主要是这里
                            confirm: {
                                text: "取消",
                                value: true,
                                visible: true,
                                className: "",
                                closeModal: true
                              },
                            cancel: {
                                text: "不取消",
                                value: false,
                                visible: true,
                                className: "",
                                closeModal: true,
                              }
                        }
                           
                    }).then(
                            function (dismiss) {
                                if(dismiss == true){
                                 $.post('<tag:root/>/base/workAction/updateWrStatus.do',{'wr_id':  wr_id,'status': 'Can'})
                                     .done(function (data) {
                                        if(data == 'true'){
                                             javascript:window.location.href="<tag:root/>/base/workAction/queryWrList.do?wr_id="+wr_id;
                                        }else{
                                            swal('取消失败');
                                        }
                                       });
                                }else{
                                    
                                }
                            }
                        )

效果图如下，取消按钮出来了：

2.png

原来很多写法已经改了，按要求改成相应的写法，再自己组装就ok了

原创作者：凌小样
作品链接：https://www.jianshu.com/p/8018396a8129
【原创不易，转载请注明出处，感谢理解】
一位爱生活，爱创作，爱分享，爱自己的90后女程序员一枚，记录工作中的点点滴滴，一起学习，共同进步，期待能和优秀的您交上朋友。