Twitterブートストラップを使用してアラートを自動的に閉じる方法

私はTwitterのブートストラップCSSフレームワークを使用しています（これは素晴らしいです）。ユーザーへの一部のメッセージについては、アラートJavaScript JSおよびCSSを使用して表示しています。

興味のある方は、http：//getbootstrap.com/javascript/#alertsで確認できます。

私の問題はこれです。ユーザーに警告を表示した後、一定の時間間隔を置いてすぐに立ち去りたいです。Twitterのドキュメントと私が調べたコードに基づくと、これは組み込まれていないようです。

• 私の最初の質問は、これが実際にブートストラップに組み込まれていないことの確認の要求です
• 第二に、どうすればこの動作を実現できますか？

呼び出すwindow.setTimeout(function, delay)と、これを達成できます。アラートが表示されてから2秒（または2000ミリ秒）後に自動的に閉じる例を次に示します。

$(".alert-message").alert();
window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);

気の利いた関数でそれをラップしたい場合は、これを行うことができます。

function createAutoClosingAlert(selector, delay) {
   var alert = $(selector).alert();
   window.setTimeout(function() { alert.alert('close') }, delay);
}

次に、それをそのように使用できます...

createAutoClosingAlert(".alert-message", 2000);

これを達成するためのよりエレガントな方法があると私は確信しています。

アラートで動作させることもできませんでした（ 'close'）。

しかし、私はこれを使用していて、それは御馳走を働かせます！アラートは5秒後にフェードアウトし、消えると、その下のコンテンツが自然な位置までスライドします。

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);

ポップアラートを処理してフェードアウトするときにも、同じ問題が発生しました。いろいろなところを調べてみたところ、これが私の解決策でした。「in」クラスを追加および削除すると、問題が解決しました。

window.setTimeout(function() { // hide alert message
    $("#alert_message").removeClass('in'); 

}, 5000);

.remove（）と同様に.alert（ 'close'）ソリューションを使用すると、ドキュメントから削除されるアラートで問題が発生したように見えたため、同じアラートdivを再度使用したい場合はできませんでした。このソリューションは、ページを更新せずにアラートを再利用できることを意味します。（私はaJaxを使用してフォームを送信し、ユーザーにフィードバックを提示していました）

    $('#Some_Button_Or_Event_Here').click(function () { // Show alert message
        $('#alert_message').addClass('in'); 
    });

アラートから「閉じる」アクションを使用しても機能しません。DOMからアラートが削除され、アラートが複数回必要になるためです（私はajaxでデータを投稿しており、すべての投稿でユーザーにメッセージを表示しています）。 。そこで、必要になるたびにアラートを作成し、タイマーを開始して、作成したアラートを閉じるこの関数を作成しました。アラートを追加するコンテナーのID、アラートのタイプ（「成功」、「危険」など）とメッセージを関数に渡します。これが私のコードです：

function showAlert(containerId, alertType, message) {
    $("#" + containerId).append('<div class="alert alert-' + alertType + '" id="alert' + containerId + '">' + message + '</div>');
    $("#alert" + containerId).alert();
    window.setTimeout(function () { $("#alert" + containerId).alert('close'); }, 2000);
}

これはcoffescriptバージョンです：

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000

上記の各ソリューションで、アラートの再利用性が失われ続けました。私の解決策は次のとおりです：

ページ読み込み時

$("#success-alert").hide();

アラートを表示する必要があると

 $("#success-alert").show();
 window.setTimeout(function () {
     $("#success-alert").slideUp(500, function () {
          $("#success-alert").hide();
      });
 }, 5000);

fadeToは不透明度を0に設定するため、表示はなしで、不透明度は0であるため、ソリューションから削除したことに注意してください。

ここで別のスレッドでいくつかの回答を検討した後、ここに私が結んだものがあります：

showAlert()オプションのtypeおよびを使用して、アラートを動的に追加するという名前の関数を作成しましたcloseDealy。たとえば、次のdangerように5秒後に自動的に閉じるタイプのアラート（つまり、Bootstrapのアラートの危険）を追加できます。

showAlert("Warning message", "danger", 5000);

これを実現するには、次のJavaScript関数を追加します。

function showAlert(message, type, closeDelay) {

    if ($("#alerts-container").length == 0) {
        // alerts-container does not exist, add it
        $("body")
            .append( $('<div id="alerts-container" style="position: fixed;
                width: 50%; left: 25%; top: 10%;">') );
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div class="alert alert-' + type + ' fade in">')
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $("#alerts-container").prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}

私はしばらくして何かを隠す非常に簡単な解決策を必要としていて、これをうまく動かすことができました：

角度でこれを行うことができます：

$timeout(self.hideError,2000);

これは、タイムアウトに達したときに呼び出す関数です

 self.hideError = function(){
   self.HasError = false;
   self.ErrorMessage = '';
};

これで、私のdialog / uiは、これらのプロパティを使用して要素を非表示にすることができます。

遅延とフェードあり：

setTimeout(function(){
    $(".alert").each(function(index){
        $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
            $(this).remove();
        });
    });
},2000);

これを試して

$(function () {

 setTimeout(function () {
            if ($(".alert").is(":visible")){
                 //you may add animate.css class for fancy fadeout
                $(".alert").fadeOut("fast");
            }

        }, 3000)

});