Когда я впервые увидел предупреждения в 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 для примера, который исчезает в состоянии оповещения через 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/
Я использую следующее:
В вашем шаблоне область предупреждения
<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. Используйте 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 отображаться.
Для версии 2.3 и выше просто добавьте:
$(".alert").fadeOut(3000 );
самозагрузки:
<div class="alert success fade in" data-alert="alert" >
<a class="close" data-dismiss="alert" href="#">×</a>
// code
</div>
Работает во всех браузерах.
Добавьте 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);
});
});
Ни один из текущих ответов не работал у меня. Я использую 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
? Это должно быть 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');
});
Я получил этот способ, чтобы закрыть исчезновение моего оповещения через 3 секунды. Надеюсь, это будет полезно.
setTimeout(function(){
$('.alert').fadeTo("slow", 0.1, function(){
$('.alert').alert('close')
});
}, 3000)
Конечно, да. Используйте этот простой файл в своем проекте: https://gist.github.com/3851727
Сначала добавьте HTML следующим образом:
<div id="messagebox" class="alert hide"></div>
а затем используйте:
$("#messagebox").message({text: "Hello world!", type: "error"});
В качестве параметров вы можете передать все типы предупреждений бутстрапа, такие как error
, success
и warning
в type
.