Question

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

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

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

简而言之：如何删除关闭处理程序并将自己的自定义处理程序添加到swal的取消按钮？

Answer 1

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

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以获取有关解雇事件的更多信息。

Answer 2

对@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');
        }

    });

Answer 3

你可以创建一个自定义的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({..});            
   }
}

Answer 4

在Sweetalert 2中

//Declaration and defination
private FirebaseAuth firebaseAuth;
FirebaseAuth.AuthStateListener authStateListener = new FirebaseAuth.AuthStateListener() {
    @Override
    public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
        if (firebaseAuth.getCurrentUser() != null){
            //Do anything here which needs to be done after user is set is complete
            updateUI();
        }
        else {
        }
    }
};

//Init and attach
firebaseAuth = FirebaseAuth.getInstance();
firebaseAuth.addAuthStateListener(authStateListener);

Answer 5

在SweetAlert2中。

Swal.fire({
        title: 'Title here',
        showCloseButton: false,
        showCancelButton: true,
        showConfirmButton: false,
        focusConfirm: false,
        allowOutsideClick: false,
        allowEscapeKey: false,
        cancelButtonText: 'Cancel Payment'
    }).then(function(res) {
        if (res.isDismissed) {
            alert('Cancel button clicked');
        }
    });

Answer 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>`
});

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

6 个答案: