2016-04-27 16 views
3

私はsweetalertメッセージでカウントダウンを表示する際に問題があります。クリックした後、私は "自動終了タイマー付きメッセージ"を使用します。そのカウントダウンがメッセージに表示され、ユーザーはカウントダウンを確認できます。甘い警告。警告ボックスにカウントダウンを表示

swal({ 
    title: "Please w8 !", 
    text: "Data loading...", 
    timer: 10000, 
    showConfirmButton: false 
}); 
+0

である私はそれがライブラリを変更することなく可能であるとは思いません。おそらく[同様の質問へのこの回答](http://stackoverflow.com/questions/357188​​99/countdown-in-setinterval-function-with-sweet-alert-plugin)はあなたのために働くことができます。 – michaPau

+1

私の答えを見てください。あなたは完全な解決策を見つけるでしょう(: –

答えて

12

SweetAlertでは不可能です。 UIのカウント機能はサポートしていません。しかし決して言わないでください:-)

私はあなたにそれをするのを助けることができる少しハックを準備しました。以下のコードをアプリケーションに追加するだけで、ライブカウントメカニズムが表示されます。また、jQueryも追加することを忘れないでください。

var 
    closeInSeconds = 5, 
    displayText = "I will close in #1 seconds.", 
    timer; 

swal({ 
    title: "Auto close alert!", 
    text: displayText.replace(/#1/, closeInSeconds), 
    timer: closeInSeconds * 1000, 
    showConfirmButton: false 
}); 

timer = setInterval(function() { 

    closeInSeconds--; 

    if (closeInSeconds < 0) { 

     clearInterval(timer); 
    } 

    $('.sweet-alert > p').text(displayText.replace(/#1/, closeInSeconds)); 

}, 1000); 

結果:ここで

enter image description here

+1

WOWハックはとてもうまく行きます。ありがとうございます!私が望んでいたものを正確にやっています... :) –

+1

これは素晴らしいです。簡単な解決策ですが、本当に巧妙です。自分でそれを考え出すことはできませんが、カスタマイズして理解するのは簡単です。 +1! –

3

がよりよい解決策

var timer = 10, // timer in seconds 
    isTimerStarted = false; 

(function customSwal() { 
    swal({ 
     title: "Please w8 !", 
     text: "Data loading..." + timer, 
     timer: !isTimerStarted ? timer * 1000 : undefined, 
     showConfirmButton: false 
    }); 
    isTimerStarted = true; 
    if(timer) { 
     timer--; 
     setTimeout(customSwal, 1000); 
    } 
})(); 
+0

クイック&クール... THX – NoBody