阻止关闭SweetAlert

Question

我有一个SweetAlert弹出窗口来确认一个动作，我需要找到一种方法来调整它，以改善用户体验。

首先是我有一个按钮，它触发的SweetAlert，这是接受申请者和发送电子邮件到他们的电子邮件地址。现在发送一封电子邮件需要一些时间，比如几秒钟。

我所做的是在触发SweetAlert的按钮上添加了一个微调按钮，但问题是，用户不会注意到这一点，因为触发SweetAlert的按钮会向上滚动整个页面，而触发它的按钮会在下面等待。

我想要的是在SweetAlert上的确认按钮上添加微调器，但默认情况下，在单击确认按钮后，SweetAlert将关闭。

下面是我的代码：

$("#accept_button").click(function(e){
    Swal.fire({
      title: 'Are you sure you want to accept this applicant?',
      text: "You won't be able to revert this!",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Accept Applicant'
    }).then((result) => {
      if (result.value) {
        console.log($(this).data('url'));
        $.ajax({
            type: 'POST',
            url: $(this).data('url'),
            data: {key:$(this).data('key'),email:$(this).data('email')},
            beforeSend: function() {
                $('#accept_button').attr("disabled", true);
                $("#accept_button").addClass("m-loader m-loader--light m-loader--left");
            },
            success: function(data) {
                console.log(data);
                if (data.ret) {
                    console.log('accepted');
                    Swal.fire(
                      'Success!',
                      'Applicant has been accepted.',
                      'success'
                    )
                    var delay = 1000; 
                    setTimeout(function(){ window.location = data.new_url; }, delay);
                } else {
                    Swal.fire(
                      'Failed!',
                      'Error occured.',
                      'warning'
                    )
                }
            },
            error: function(xhr) { 
                $('#accept_button').attr("disabled", false);
                $("#accept_button").removeClass("m-loader m-loader--light m-loader--left");
                toastr.options.timeOut = 5000;
                toastr.error('Error occured.', 'Error');
            },
            dataType: 'json'
        });
      }
    })
});

我希望你们能帮助我和我的web应用程序的用户。非常感谢!

Answer 1

你为什么不使用“自动关闭计时器”，这样你就可以向用户显示一条消息，并吸引用户的注意力：

let timerInterval
Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <strong></strong> milliseconds.',
  timer: 2000,
  willOpen: () => {
    Swal.showLoading()
    timerInterval = setInterval(() => {
      Swal.getHtmlContainer().querySelector('strong')
        .textContent = Swal.getTimerLeft()
    }, 100)
  },
  didClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  if (
    /* Read more about handling dismissals below */
    result.dismiss === Swal.DismissReason.timer
  ) {
    console.log('I was closed by the timer')
  }
})

您可以控制计时器，甚至可以阻止UI执行任何其他操作。请看示例"A message with auto close timer"：https://sweetalert2.github.io/#examples