甜蜜警報，但按鈕在前幾秒禁用

Question

我正在創建一個顯示非常重要消息的Sweet Alert，我不希望用戶在沒有閱讀的情況下將其解雇。

因此，為了強調消息的重要性，我想讓OK按鈕禁用（比如說...）5秒，因此用戶必須至少等待，才能解除警報。

一個可見的計時器也會很甜蜜。 我在我的應用程序中使用AngularJS。

我可以輕松地將自定義模式作為警報用於此目的，但我想使用Sweet Alert的原因是因為它已經在我的應用程序中使用，我不想打破模式。

Answer 1

您可以使用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')
  }
})

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

我確信有更好的方法來編寫這個，但這對我有用，只需將超時計時器設置為您希望它保持打開的任何持續時間。