Могут ли оповещения Twitter Bootstrap исчезать и исчезать? - PullRequest
Новая
       31

Могут ли оповещения Twitter Bootstrap исчезать и исчезать?

74 голосов
/ 06 октября 2011

Когда я впервые увидел предупреждения в 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>

Ответы [ 10 ]

139 голосов
/ 06 ноября 2012

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

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

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

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

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

Хотя это правда, что начальная загрузка не поддерживает замирания в предупреждениях, большинство ответов здесь использует функцию замирания jQuery, которая использует 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 ответ довольно прост. Не добавляйте класс «в» к своему предупреждению. И добавьте это, используя 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/

27 голосов
/ 15 декабря 2011

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

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

<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!');
17 голосов
/ 06 октября 2011

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

8 голосов
/ 22 февраля 2013

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

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

6 голосов
/ 15 декабря 2011

Добавить 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);
   });
});
4 голосов
/ 09 января 2014

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

Я не согласен с тем, как 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');

});
1 голос
/ 15 октября 2014

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

    setTimeout(function(){
    $('.alert').fadeTo("slow", 0.1, function(){
        $('.alert').alert('close')
    });     
    }, 3000)
1 голос
/ 13 октября 2012

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

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

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

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

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

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

0 голосов
/ 25 мая 2018

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

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

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>

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

...