90

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

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

私の問題はこれです。ユーザーにアラートを表示した後、しばらくすると消えてしまいます。Twitterのドキュメントと私が調べたコードに基づいて、これは組み込まれていないようです:

  • 私の最初の質問は、これが実際に Bootstrap に組み込まれていないことの確認の要求です
  • 第二に、どうすればこの動作を実現できますか?
4

10 に答える 10

109

呼び出す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);

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

于 2011-10-04T04:37:02.257 に答える
99

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

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

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);
于 2011-11-15T18:14:18.127 に答える
3

アラートで「閉じる」アクションを使用しても機能しません。アラートが 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);
}
于 2013-11-25T16:28:06.823 に答える
2

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

ページの読み込み時

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

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

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

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

于 2016-01-15T03:39:39.170 に答える
2

これは、cofescript バージョンです。

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000
于 2013-11-12T22:35:07.250 に答える
0

ここと別のスレッドでいくつかの回答を調べた後、最終的には次のようになりました。

オプションのshowAlert()と. たとえば、次のように 5 秒後に自動的に閉じるタイプのアラート (つまり、Bootstrap の alert-danger) を追加できます。typecloseDealydanger

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);     
}
于 2015-11-12T01:38:05.400 に答える
0

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

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

$timeout(self.hideError,2000);

タイムアウトに達したときに呼び出す関数は次のとおりです

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

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

于 2016-06-02T08:31:38.787 に答える