Сладкий таймер оповещения - готовая функция

Я немного поигрался с плагином SweetAlert: Sweet alert

Я хотел сделать кнопку удаления, где пользователь получает запрос перед фактическим удалением. Когда пользователь затем снова нажимает «удалить», он говорит «готово», и пользователь должен снова нажать «ОК», чтобы подсказка исчезла навсегда.

SweetAlert имеет функцию таймера, так что вы можете автоматически закрыть последнее приглашение «Готово» через несколько секунд или около того, что отлично работает. У них также есть функция, в которой вы можете реализовать функцию, которая будет запускаться, когда пользователь нажимает «ОК» в приглашении «Готово». Проблема в том, что эта функция не запускается, если приглашение автоматически закрывается после завершения таймера.

Любые идеи, как это можно сделать?

Когда timer и функция не запущены:

swal({
     title: "Deleted!",
     text: "Your row has been deleted.",
     type: "success",
     timer: 3000
     },
     function () {
            location.reload(true);
            tr.hide();
     });

Без timer, но с работающей функцией (при нажатии кнопки "ок"):

swal("Deleted!", "Your row has been deleted.", "success"), function () {
    location.reload();
    tr.hide();
};

javascript jquery sweetalert
person Thomas Teilmann    schedule 29.04.2015    source источник

Ответы (5)


arrow_upward
21
arrow_downward

Пояснение

Я думаю, вам нужно отделить swal от функции. Я имею в виду, что отображается swal, функция работает в фоновом режиме, а модальное окно автоматически закрывается.

Javascript/jQuery:

swal({
     title: "Deleted!",
     text: "Your row has been deleted.",
     type: "success",
     timer: 3000
     });
     function () {
        location.reload(true);
        tr.hide();
     };

Ваш код с примером SweetAlert:

swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel plx!",
    closeOnConfirm: false,
    closeOnCancel: false
    },
    function (isConfirm) {
        if (isConfirm) {
           swal({
              title: "Deleted!",
              text: "Your row has been deleted.",
              type: "success",
              timer: 3000
           });
           function () {
              location.reload(true);
              tr.hide();
           };
        }
        else {
            swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
    });
person Hkidd    schedule 29.04.2015

arrow_upward
9
arrow_downward

Вы не можете просто использовать then?

Этот способ намного чище.

swal({
    title: 'Login Success',
    text: 'Redirecting...',
    icon: 'success',
    timer: 2000,
    buttons: false,
})
.then(() => {
    dispatch(redirect('/'));
})
person Sonson Ixon    schedule 08.03.2019
comment
это работает отлично. За исключением того, что в зависимости от версии swal вы должны использовать showConfirmButton:false, showCancelButton:false - person Tuan Jinn; 03.05.2020

arrow_upward
4
arrow_downward

Я нашел решение.

В настоящее время я экспериментирую с sweetAlert и нашел решение для вашего вопроса.
Это моя пользовательская функция для создания sweetalert, которая закроется через несколько секунд таймера.

var sweetAlert = function(title, message, status, timer = 5000, isReload = false){
    swal({
        title   : title,
        text    : message + '<br/>This pop up will close automatically in <strong class="swal-timer-count">' + timer/1000 + '</strong> seconds...',
        type    : status,
        html    : true,
        timer   : timer,
        allowEscapeKey  : false
    }, function () {
        swal.close();
        if(isReload)
            location.reload(true);
    });
    var e = $(".sweet-alert").find(".swal-timer-count");
    var n = +e.text();
    setInterval(function(){
        n > 1 && e.text (--n);
    }, 1000);
}

Вы можете вызвать этот метод, используя этот код
Помните, что таймер использует миллисекунды.

sweetAlert('Congratulation!', 'You successfully copy paste this code', 'success', 3000, false);
person ibnǝꟻ    schedule 24.07.2017
comment
Хороший!!!! Я искал это часами, и вы поняли это так просто! Большое спасибо!! - person Evis; 09.02.2018

arrow_upward
3
arrow_downward

Эта проблема устранена в новом выпуске Sweetalert 2.

см. плункер

Плункер

.
person Ali Mohammed    schedule 29.04.2015

arrow_upward
3
arrow_downward

решение здесь.

[https://sweetalert2.github.io/]

Видеть. Сообщение с таймером автоматического закрытия

let timerInterval
Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <strong></strong> milliseconds.',
  timer: 2000,
  onBeforeOpen: () => {
    Swal.showLoading()
    timerInterval = setInterval(() => {
      Swal.getHtmlContainer().querySelector('strong')
        .textContent = Swal.getTimerLeft()
    }, 100)
  },
  onClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  if (
    /* Read more about handling dismissals below */
    result.dismiss === Swal.DismissReason.timer
  ) {
    console.log('I was closed by the timer')
  }
})

Мой код

swal.fire({ type: 'success', title: 'Saved.', 
            showConfirmButton: false, timer: 1500 
}).then((result) => {
    if (result.dismiss === Swal.DismissReason.timer) {
         $("#new_reminder").modal("hide");                            
    }
});
person TodsaHerb    schedule 04.09.2019