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

Я использую фреймворк css bootstrap twitter (который является фантастическим). Для некоторых сообщений пользователям я показываю их с помощью предупреждений Javascript JS и CSS.

для тех, кто заинтересован, его можно найти здесь:http://getbootstrap.com/javascript/#alerts

моя проблема в этом; после того, как я отобразил предупреждение пользователю, я хотел бы, чтобы он просто ушел через некоторый интервал времени. Основываясь на документах twitter и коде, который я просмотрел, похоже, что это не запеченный в:

  • мой первый вопрос-это запрос на подтверждение того, что это действительно не запечено в Bootstrap
  • во-вторых, как я могу добиться этого поведения?
90
alertdialog css javascript jquery twitter-bootstrap

10 ответов

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

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

107

Я не мог заставить его работать с alert.("близко") тоже.

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

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

у меня была такая же проблема при попытке обработать всплывающие предупреждения и их исчезновение. Я искал вокруг и нашел, что это мое решение. Добавление и удаление класса " 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'); 
    });
3

использование действия "закрыть" для предупреждения не работает для меня, потому что оно удаляет предупреждение из DOM, и мне нужно предупреждение несколько раз (я публикую данные с ajax, и я показываю сообщение пользователю на каждом посту). Поэтому я создал эту функцию, которая создает оповещение каждый раз, когда оно мне нужно, а затем запускает таймер, чтобы закрыть созданное оповещение. Я передаю в функцию идентификатор контейнера, к которому я хочу добавить предупреждение, тип предупреждения ("успех", "опасность" и т. д.) и сообщение. Вот мой код:

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

это версия coffescript:

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

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

на странице load

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

оповещение нужно будет отображаться

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

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

2

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

Я создал функцию с именем 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);     
}
0

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

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

$timeout(self.hideError,2000);

вот функция, которую я вызываю, когда тайм-аут был достигнут

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

теперь мой диалог / пользовательский интерфейс может использовать эти свойства для скрытия элементов.

0

С задержкой и исчезают :

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

попробуй этот

$(function () {

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

        }, 3000)

});
0