Как автоматически закрыть оповещения с помощью Twitter Bootstrap

Ответ 1

Вызов 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);

Я уверен, что для этого есть более элегантные способы.

Ответ 2

Я не мог заставить его работать с предупреждением ( "закрыть" ).

Однако я использую это, и это работает! Предупреждение исчезнет через 5 секунд, и как только оно исчезнет, ​​содержимое под ним будет скользить до его естественного положения.

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

Ответ 3

У меня была эта же проблема при попытке обработать всплывающие оповещения и угасать их. Я искал в разных местах и ​​нашел, что это мое решение. Добавление и удаление класса 'in' исправило мою проблему.

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

}, 5000);

При использовании .remove() и аналогичного решения .alert('close') я, похоже, попал в проблему с удалением предупреждения из документа, поэтому, если бы я захотел снова использовать тот же alert div, я не смог, Это решение означает, что предупреждение повторно используется без обновления страницы. (Я использовал aJax для отправки формы и предоставления обратной связи пользователю)

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

Ответ 4

Использование действия "закрыть" для предупреждения не работает для меня, потому что оно удаляет предупреждение из 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);
}

Ответ 5

Я реализовал библиотеку Javascript, в которой есть то, что вы просите как функцию: https://gist.github.com/1569896

Ответ 6

Это версия coffescript:

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

Ответ 7

С каждым из вышеперечисленных решений я продолжал терять возможность повторного использования предупреждения. Мое решение было следующим:

Загрузка страницы

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

Как только предупреждение нужно отобразить

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

Обратите внимание, что fadeTo задает непрозрачность 0, поэтому на дисплее ничего не было, а непрозрачность - 0, поэтому я удалился из своего решения.

Ответ 8

Кажется, что он сломан. Я сообщил об этом в тестовом сценарии: https://github.com/twitter/bootstrap/issues/366

Вы можете просмотреть мой код здесь: http://jsdo.it/rfkrocktk/bRrV

Ответ 9

Перейдя некоторые ответы здесь в другом потоке, вот что я закончил с:

Я создал функцию с именем showAlert(), которая бы динамически добавляла предупреждение с опциями type и closeDealy. Чтобы вы могли, например, добавить оповещение типа danger (т.е. Предупреждение об опасностях Bootstrap), которое автоматически закроется через 5 секунд:

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

Ответ 10

Мне понадобилось очень простое решение, чтобы скрыть что-то после этого и удалось заставить это работать:

В angular вы можете сделать это:

$timeout(self.hideError,2000);

Вот функция, которую я вызываю, когда время ожидания достигнуто

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

Итак, теперь мой диалог /ui может использовать эти свойства, чтобы скрыть элементы.

Ответ 11

С задержкой и затуханием:

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

Ответ 12

Попробуй это

$(function () {

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

        }, 3000)

});