甜蜜警报，但按钮在最初几秒钟内被禁用答案

【问题标题】：Sweet Alert, but buttons are disabled for the first few seconds甜蜜警报，但按钮在最初几秒钟内被禁用
【发布时间】：2018-11-28 12:40:54
【问题描述】：

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

因此，为了强调消息的重要性，我想让 OK 按钮禁用（比方说......） 5 秒，因此用户必须至少等待该时间才能解除警报。

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

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

【问题讨论】：

您能添加一个代码示例吗？
你目前困在哪里？
我假设您正在寻找一个完整的解决方案。
我的代码没什么好说的。我只想用纯文本触发一个甜蜜警报，如描述的那样工作。 @LazioTibijczyk，我可以使用起点想法。我什至不知道从哪里开始。

标签： javascript angularjs timer sweetalert2

【解决方案1】：

您可以使用 SweetAlert2 中已有的内容来实现这一点。正如约瑟夫在另一个答案中提到的，您应该将以下 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')
  }
})

【讨论】：

完美运行。谢谢。

【解决方案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 具有配置选项 closeOnClickOutside 和 closeOnEsc。将两者都设置为 false 会锁定浏览器。
我在代码中添加了一些更改，以防止用户退出 5 秒，但我找不到将计时器放入实际模式窗口的方法。