Может ли Twitter Bootstrap оповещения исчезать, а также?

что я использую это:

в вашем шаблоне область оповещения

<div id="alert-area"></div>

затем функция jQuery для отображения предупреждения

function newAlert (type, message) {
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert('success', 'Oh yeah!');

вы можете исчезать в поле с помощью jQuery. Используйте бутстрапы, встроенные в класс 'hide', чтобы эффективно установить display:none на элементе div:

<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0">
            <a class="close" href="#">×</a>
            <p><strong>Well done!</strong> You successfully read this alert message.</p>
        </div>

а затем использовать функцию fadeIn в jquery, например:

$("#saveAlert").fadeIn();

есть также указать продолжительность для функции fadeIn, например: $("#saveAlert").fadeIn(400);

полную информацию об использовании функции fadeIn можно найти на официальном сайте документации jQuery: http://api.jquery.com/fadeIn/

просто боковая заметка, Если вы не используете jquery, вы можете либо добавить класс 'hide' в свой собственный файл CSS, либо просто добавить его в свой div:

 <div style="display:none;" id="saveAlert">

ваш div будет в основном установлен в скрытый по умолчанию, а затем jQuery выполнит действие fadeIn, заставляя div отображаться.

для 2.3 и выше, только добавить:

$(".alert").fadeOut(3000 );

bootstrap:

<div class="alert success fade in" data-alert="alert" >
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    // code 
</div>

работает во всех браузерах.

добавить hide класс alert-message. Затем поместите следующий код после импорта скрипта jQuery:

$(document).ready( function(){
    $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
    window.setTimeout( function(){
        $(".alert-message").slideUp();
    }, 2500);
});

если вы хотите обрабатывать несколько сообщений, этот код будет скрывать их в порядке возрастания:

$(document).ready( function(){
   var hide_delay = 2500;  // starting timeout before first message is hidden
   var hide_next = 800;   // time in mS to wait before hiding next message
   $(".alert-message").slideDown().each( function(index,el) {
      window.setTimeout( function(){
         $(el).slideUp();  // hide the message
      }, hide_delay + hide_next*index);
   });
});

ни один из текущих ответов не работал для меня. Я использую Bootstrap 3.

мне понравилось то, что делал Роб Вермеер, и я начал с его ответа.

для эффекта затухания, а затем затухания, я просто использовал следующую функцию и использовал jQuery:

Html на моей странице, чтобы добавить предупреждение(ы) в:

        <div class="alert-messages text-center">
        </div>

функция Javascript, чтобы показать и отклонить предупреждение.

function showAndDismissAlert(type, message) {
    var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';

    // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
    $(".alert-messages").prepend(htmlAlert);

    // Since we are prepending, take the first alert and tell it to fade in and then fade out.
    // Note: if we were appending, then should use last() instead of first()
    $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); });
}

затем, чтобы показать и отклонить предупреждение, просто вызовите функцию вот так:

    showAndDismissAlert('success', 'Saved Successfully!');
    showAndDismissAlert('danger', 'Error Encountered');
    showAndDismissAlert('info', 'Message Received');

в качестве примечания, я стилизовал div.alert-сообщения фиксированные сверху:

    <style>
    div.alert-messages {
        position: fixed;
        top: 50px;
        left: 25%;
        right: 25%;
        z-index: 7000;
    }
    </style>

я не согласен с тем, как Bootstrap использует fade in (как видно из их документации -http://v4-alpha.getbootstrap.com/components/alerts/), и мое предложение-избегать имен классов fade и in, и чтобы избежать этой картины в целом (что в настоящее время видно в топ-рейтинге ответа на этот вопрос).

(1) семантика неверна - переходы являются временными, но имена классов живут. Так почему же мы должны называть наши классы fade и fade in? Он должен быть!--8--> и faded-in, так что, когда разработчики читают разметку, ясно, что эти элементы были faded или faded-in. Команда Bootstrap уже покончила с hide на hidden, почему fade что-нибудь другое?

(2) используя 2 классы fade и in для одного перехода загрязняет пространство класса. И, это не ясно, что fade и in связаны друг с другом. Элемент in класс выглядит как совершенно независимый класс, как alert и alert-success.

лучшее решение-использовать faded когда элемент исчез, и заменить этот класс на faded-in когда элемент исчез.

Тревога Исчезла

Итак, чтобы ответить на вопрос. Я думаю, что разметка предупреждений, стиль и логика должны быть написаны следующим образом. Примечание: не стесняйтесь заменить логику jQuery, если вы используете ваниль javascript.

HTML

<div id="saveAlert" class="alert alert-success">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

CSS

.faded {
  opacity: 0;
  transition: opacity 1s;
}

JQuery

$('#saveAlert .close').on('click', function () {

  $("#saveAlert")
    .addClass('faded');

});

конечно, да. Используйте этот простой файл в своем проекте:https://gist.github.com/3851727

Сначала добавьте HTML вот так:

<div id="messagebox" class="alert hide"></div>

и затем использовать:

$("#messagebox").message({text: "Hello world!", type: "error"});

вы можете передать все типы предупреждений bootstrap, такие как error,success и warning до type свойства как параметры.

Я получил этот способ, чтобы закрыть исчезает мое предупреждение через 3 секунды. Надеюсь, что это будет полезно.

    setTimeout(function(){
    $('.alert').fadeTo("slow", 0.1, function(){
        $('.alert').alert('close')
    });     
    }, 3000)

Это очень важный вопрос и я изо всех сил пытался сделать это (показать/скрыть) сообщение, заменив текущее и добавив новое сообщение.

Ниже приведен рабочий пример:

function showAndDismissAlert(type, message) {

  var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';
  $(".alert-messages").prepend(htmlAlert);
  $(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() {
    $(this).remove();
  });

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert-messages"></div>

<div class="buttons">
  <button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>
  <button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>
  <button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>
</div>

надеюсь, что это поможет другим!