11

私はSweetAlertプラグインで少し遊んでいます：Sweet alert

実際の削除の前にユーザーにプロンプ​​トが表示される削除ボタンを作成したかったのです。ユーザーがもう一度「削除」を押すと、「完了」と表示され、ユーザーはプロンプトを完全に消すためにもう一度「OK」をクリックする必要があります。

SweetAlert にはタイマー機能があるため、最後の "Done" プロンプトを数秒後に自動的に閉じることができます。これは問題なく機能します。また、ユーザーが「完了」プロンプトで「OK」をクリックしたときに実行される関数を実装できる機能もあります。問題は、タイマーが終了した後にプロンプ​​トが自動的に閉じると、その機能が実行されないことです。

これを行う方法はありますか？

timer関数が実行されていない場合:

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

なしtimerで機能する機能あり (「OK」ボタンをクリックした場合):

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

5 に答える 5

23

説明

機能から切り離す必要があると思います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");
        }
    });
于 2015-04-29T14:22:25.487 に答える
5

私は解決策を見つけました。

現在、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);
于 2017-07-24T08:13:31.623 に答える
4

解決策はここにあります。

[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");                            
    }
});
于 2019-09-04T07:21:16.853 に答える
3

この問題は、 Sweetalert 2の新しいリリースで修正されました。

プランカーを参照

プランカー

.
于 2015-04-29T14:03:38.547 に答える