防止关闭 SweetAlert答案

【问题标题】：Prevent Closing Of SweetAlert防止关闭 SweetAlert
【发布时间】：2019-09-11 04:10:50
【问题描述】：

我有一个 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'
        });
      }
    })
});

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

【问题讨论】：

标签： javascript jquery sweetalert sweetalert2

【解决方案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 执行任何其他操作。请看示例“带有自动关闭计时器的消息”： https://sweetalert2.github.io/#examples

【讨论】：