Question

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

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

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

为此，我可以轻松地将自定义模式用作警报，但是我想使用Sweet Alert的原因是因为它已在我的应用程序中使用，并且我不想破坏模式。

Answer 1

您可以使用SweetAlert2中已有的功能来实现此目的。如Joseph的另一个答案所述，您应将以下sweetalert2属性设置为false，以避免用户忽略模态：

allowOutsideClick: false,
allowEscapeKey: false,

然后显示小号时，您可以隐藏确认按钮：

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')
  }
})

Answer 2

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

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();

我敢肯定，有更好的方法可以编写此代码，但这对我有用，只需将超时计时器设置为您希望它保持打开状态的任何时间即可。

Sweet Alert，但在最初的几秒钟内按钮被禁用

2 个答案: