Sweet Alert，但按钮在前几秒内被禁用

Question

我正在创建一个显示非常重要消息的 Sweet Alert，我不希望用户未阅读就关闭它。

因此，为了强调消息的重要性，我想将“确定”按钮禁用（比方说...）5 秒，这样用户必须至少等待 5 秒才能解除警报。

可见的计时器也很不错。我在我的应用程序中使用 AngularJS。

为此，我可以轻松地制作一个自定义模式作为警报，但我想使用 Sweet Alert 的原因是因为它已经在我的整个应用程序中使用，我不想打破这种模式。

Answer 1

我认为这段代码就是您要找的

var h = 1;

function run(){
  if(h==1){
    swal('hello','warning', {button: {closeModal: false}, closeOnEsc: false, closeOnClickOutside: false}).then(nnn => {if(h==1){
      run();
    }else{
      swal.close();
    }});
    setTimeout(function(){ h = 0;}, 5000);
  }
}

run();

我确信有更好的方法来编写这个，但这对我有用，只需将超时计时器设置为您希望它保持打开状态的任何持续时间。

Answer 2

您可以使用 SweetAlert2 中已有的内容来实现它。正如 Joseph 在另一个答案中提到的，您应该将以下 sweetalert2 属性设置为 false 以避免用户关闭模态：

allowOutsideClick: false,
allowEscapeKey: false,

您可以在显示 swal 时隐藏确认按钮：

onOpen: () => {
  swal.showLoading()
  ....
}

然后在一段时间后使用 setTimeout 再次显示确认按钮：

onOpen: () => {
  swal.showLoading()
  setTimeout(() => { swal.hideLoading() }, 5000)
}

swal的完整代码是：

swal({
  title: 'Please read this message!',
  allowOutsideClick: false,
  allowEscapeKey: false, 
  onOpen: () => {
    swal.showLoading()
    setTimeout(() => { swal.hideLoading() }, 5000)
  },
}).then((result) => {
  if (!result.dismiss) {
     console.log('user read the important message')
  }
})

Sweet Alert，但按钮在前几秒内被禁用

Sweet Alert, but buttons are disabled for the first few seconds

javascript

timer

angularjs

sweetalert2