web-dev-qa-db-ja.com

Twitter Bootstrapを使用してアラートを自動的に閉じる方法

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

興味のある方は、ここで見つけることができます： http://getbootstrap.com/javascript/#alerts

私の問題はこれです。ユーザーにアラートを表示した後、一定の時間間隔を置いてアラートを消したいです。 Twitterのドキュメントと私が調べたコードに基づいて、これは焼き付けられていないように見えます：

  • 私の最初の質問は、これが実際にブートストラップに焼き付けられていないことを確認する要求です
  • 次に、この動作をどのように実現できますか？
javascriptjquerycsstwitter-bootstrapalert
90
Mario Zigliotto

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

これを実現するよりエレガントな方法があると確信しています。

108
jessegavin

私はそれをアラートで動作させることができませんでした。（「閉じる」）。

しかし、私はこれを使用していますが、うまくいきます！アラートは5秒後に消え、一度消えると、その下のコンテンツは自然な位置までスライドします。

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

ポップアラートを処理してそれらをフェードアウトしようとすると、同じ問題が発生しました。私はさまざまな場所を検索し、これが私の解決策であることがわかりました。 「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'); 
    });
4
Mark Daniel

アラートで「閉じる」アクションを使用しても、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);
}
3
Daniele Armanasco

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

ページ読み込み時

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

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

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

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

2
biggles

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

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

これを試して

$(function () {

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

        }, 3000)

});
0
danny

遅延とフェード付き：

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

ここで別のスレッドでいくつかの答えを調べた後、ここで私が終わったものです：

オプションのtypeとcloseDealyを使用して、動的にアラートを追加するshowAlert()という名前の関数を作成しました。たとえば、次のように5秒後に自動的に閉じるタイプdanger（つまり、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);     
}
0
isapir

しばらくして何かを隠すための非常に簡単なソリューションが必要で、これを機能させることができました。

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

$timeout(self.hideError,2000);

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

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

したがって、ダイアログ/ UIはこれらのプロパティを使用して要素を非表示にできます。

0
leeroya