SweetAlert2 - 绑定另一个事件以取消按钮？答案

【问题标题】：SweetAlert2 - Bind another event to cancel button?SweetAlert2 - 绑定另一个事件以取消按钮？
【发布时间】：2017-07-11 17:33:00
【问题描述】：

我正在使用最新版本的很棒的SweetAlert2 jquery 插件。

我有一个带有 2 个按钮的简单 SweetAlert。 1个按钮是确认按钮，另一个是取消按钮。我正在使用 html 选项向警报添加文本输入。当用户按下确认按钮时，将执行 AJAX 调用并关闭警报。

现在我想使用取消按钮来执行一些其他代码，而不是关闭警报的默认操作。（用户可以使用 showCloseButton: true 关闭警报）。

那么简而言之：如何去掉关闭的handler，给swal的取消按钮添加一个自己的自定义handler？

【问题讨论】：

limonte.github.io/sweetalert2/#dismiss-handle
这不是我的意思，因为这是关闭警报。我需要在不关闭警报的情况下处理取消事件。这可能吗？

标签： button sweetalert sweetalert2

【解决方案1】：

您可以创建一个自定义 html 文件并在其中设置一个取消按钮，该按钮将触发您自己的取消处理程序。

例如

<html> <!--custom.html-->      
  <button id="confirmBtn">confirm<button>
  <button id="cancelBtn">cancel<button>
<html>

$.get("custom.html", function (data) {
        swal({
            html: data,
            showCloseButton: false,
            showCancelButton: false,
            showConfirmButton: false
        });
        $("#cancelBtn").click(function () {
            //handle your cancel button being clicked
            $.when($.ajax({....})).then(function() {
                 // when all AJAX requests are complete
             });
        });
        $("#confirmBtn").click(function () {
            //handle your confirm button being clicked
        });
    });

您可以在取消时回想起弹出窗口。将此添加到您的 swal 函数中。

function (dismiss) {
   if (dismiss === 'cancel') {
      swal({..});            
   }
}

完整的

swal({
   title: 'Swal Title',
   text: 'Your swal text',
   type: 'warning',
   showCancelButton: true,
   cancelButtonText: 'cancel'
}).then(function(){
   //Confirmed
}, function(dismiss){
   if(dismiss == 'cancel'){
      //swal({..}); //un-comment this line to add another sweet alert popup on cancel
   }
});

【讨论】：

【解决方案2】：

只需添加您的自定义函数即可捕获拒绝，例如：

swal({
   title: 'Some title',
   text: 'some text for the popup',
   type: 'warning',
   showCancelButton: true,
   cancelButtonText: 'Some text for cancel button'
}).then(function(){
   // function when confirm button clicked
}, function(dismiss){
   if(dismiss == 'cancel'){
       // function when cancel button is clicked
   }
});

您甚至可以添加更多函数来捕获另一个关闭事件，只需阅读SweetAlert2 Docs 了解有关关闭事件的更多信息。

【讨论】：

【解决方案3】：

对@Raditya Adi Baskara 的回答稍加定制，

swal({
        title: "$titleWarnignBox",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#36c6d3',
        cancelButtonColor: '#d33',
        confirmButtonText: '$confrimBtn',
        cancelButtonText: '$cancelBtn'
    }).then(function(result){
        if(result.value){
            console.log('good');
        }else if(result.dismiss == 'cancel'){
           console.log('cancel');
        }

    });

【讨论】：

【解决方案4】：

在sweetalert 2中

            swal.fire({
                title: "Notice",
                text: "Are you sure ?",
                showCancelButton: true,
                type: 'error',
                cancelButtonColor: '#d33',
            })
                .then((res) => {
                    if(res.value){
                        console.log('confirmed');
                    }else if(res.dismiss == 'cancel'){
                        console.log('cancel');
                    }
                    else if(res.dismiss == 'esc'){
                        console.log('cancle-esc**strong text**');
                    }
                });

【讨论】：

【解决方案5】：

在 SweetAlert2 中。

狼火（{ title: '这里的标题', 显示关闭按钮：假，显示取消按钮：真，显示确认按钮：假，焦点确认：假，允许外部点击：假， allowEscapeKey：假， cancelButtonText: '取消付款' }).then(函数(res) { 如果（res.isDismissed）{ alert('点击取消按钮'); } });

【讨论】：

【解决方案6】：

在sweetalert2中，如果想防止点击取消按钮时关闭，可以添加自己的自定义按钮为html：(Run it live)

var onBtnClicked = (btnId) => {
  // Swal.close();
  alert("you choosed: " + btnId);
};
Swal.fire({
  title: "What you want to do?",
  icon: "warning",
  showConfirmButton: false,
  showCloseButton: true,
  html: `
     <p>select an action</p>
    <div>
      <button class="btn btn-primary" onclick="onBtnClicked('reply')">Reply</button>
      <button class="btn btn-danger" onclick="onBtnClicked('delete')">Delete</button>
    </div>`
});

【讨论】：