Могут ли щебетать уведомления Bootstrap, как и как?

Ответ 1

Я категорически не согласен с большинством ответов, упомянутых ранее.

Короткий ответ:

Опустите класс "in" и добавьте его, используя jQuery, чтобы его угасить.

См. этот jsfiddle для примера, который исчезает в состоянии оповещения через 3 секунды http://jsfiddle.net/QAz2U/3/

Длинный ответ:

Хотя верно, что bootstrap не поддерживает фейдинг в предупреждениях, большинство ответов здесь используют функцию fade jQuery, которая использует JavaScript для анимации (стирания) элемента. Большим преимуществом этого является кросс-браузерная совместимость. Недостатком является производительность (см. Также: jQuery для вызова анимации затухания CSS3?).

Bootstrap использует переходы CSS3, которые имеют лучшую производительность. Что важно для мобильных устройств:

Загрузите CSS, чтобы вывести предупреждение:

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

Почему я считаю, что эта производительность так важна? Люди, использующие старые браузеры и аппаратные средства, потенциально получат прерывистые переходы с помощью jQuery.fade(). То же самое касается старого оборудования с современными браузерами. Используя переходы CSS3, люди, использующие современные браузеры, получат плавную анимацию даже со старым оборудованием, а люди, использующие старые браузеры, которые не поддерживают переходы CSS, просто мгновенно заметят, что элемент вошел в него, что, по моему мнению, является более удобным для пользователя, чем изменчивая анимация.

Я пришел сюда, чтобы найти тот же ответ, что и выше: чтобы исчезнуть в бутстраге. После некоторого копания в коде и CSS Bootstrap ответ довольно прост. Не добавляйте класс "in" к вашему оповещению. И добавьте это, используя jQuery, когда вы хотите исчезнуть в своем предупреждении.

HTML (обратите внимание, что в классе нет NO!)

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

JavaScript:

function showAlert(){
  $("#myAlert").addClass("in")
}

Вызов функции выше функции добавляет класс "in" и исчезает в оповещении с использованием переходов CSS3: -)

Также см. этот jsfiddle для примера с использованием тайм-аута (спасибо John Lehmann!): http://jsfiddle.net/QAz2U/3/

Ответ 2

Я использую следующее:

В вашем шаблоне область предупреждения

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

Ответ 3

Вы можете затухать в ящике с помощью jquery. Используйте bootstraps, встроенные в класс 'hide', чтобы эффективно установить отображение: 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 отображаться.

Ответ 4

Для версии 2.3 и выше просто добавьте:

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

самозагрузки:

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

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

Ответ 5

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

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

Ответ 6

Ни один из текущих ответов не работал у меня. Я использую 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>

Ответ 7

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

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

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

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

Alert Faded

Итак, чтобы ответить на вопрос. Я думаю, что разметка, стиль и логика предупреждений должны быть написаны следующим образом. Примечание. Не стесняйтесь заменять логику 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');

});

Ответ 8

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

Сначала добавьте HTML следующим образом:

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

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

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

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

Ответ 9

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

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