Чи можуть сповіщення Twitter Bootstrap зникати, як і зникати?

Коли я вперше побачив попередження в Bootstrap, я думав, що вони будуть поводитися так, як модальне вікно, падаючи вниз або зникаючи, а потім зникаючи, коли закриваються. Але, схоже, їх завжди видно. Я думаю, я міг би змусити їх сидіти в шарі над моїм додатком і управляти їх показом, але мені було цікаво, чи вбудована функціональність?

Дякую!

Редагуйте, що я маю досі:

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

Я категорично не погоджуюсь з більшістю згаданих раніше відповідей.

Коротка відповідь:

Опустіть клас "in" і додайте його за допомогою jQuery, щоб зникнути.

Див. Цей jsfiddle для прикладу, який зникає через три секунди в режимі оповіщення http://jsfiddle.net/QAz2U/3/

Довга відповідь:

Незважаючи на те, що справжній завантажувальний файл не підтримує затухання в попередженнях, більшість відповідей тут використовують функцію jQuery fade, яка використовує JavaScript для анімації (зникання) елемента. Великою перевагою цього є сумісність між браузерами. Недоліком є ​​продуктивність (див. Також: jQuery для виклику анімації затухання CSS3? ).

Bootstrap використовує переходи CSS3, які мають набагато кращу продуктивність. Що важливо для мобільних пристроїв:

Bootstraps 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 (зауважте, що в класі НІ !)

<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 для прикладу використання тайм-ауту (спасибі Джону Леманну!): Http://jsfiddle.net/QAz2U/3/

Що я використовую, це:

У вашому шаблоні область попереджень

<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/

Також просто sidenote, якщо ви не використовуєте jquery, ви можете або додати клас 'hide' у свій власний файл CSS, або просто додати це у свій div:

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

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

Для версій 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>

Працює у всіх браузерах.

Додати 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-messages, закріплені зверху:

    <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? Це повинно бути fadedі 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>

Сподіваюся, це допоможе іншим!