当我第一次在 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>
【问题讨论】：
标签： jquery css alerts twitter-bootstrap
这是一个非常重要的问题，我正在努力通过替换当前消息并添加新消息来完成（显示/隐藏）消息。
以下是工作示例：
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>希望它能帮助其他人！
【讨论】：
我强烈不同意前面提到的大多数答案。
简答：
省略“in”类并使用jQuery添加它以使其淡入。
请参阅此 jsfiddle 以获取 3 秒后淡入警报的示例 http://jsfiddle.net/QAz2U/3/
长答案：
虽然确实 bootstrap 本身并不支持淡入淡出警报，但这里的大多数答案都使用 jQuery 淡入淡出功能，该功能使用 JavaScript 对元素进行动画（淡入淡出）。这样做的最大优势是跨浏览器兼容性。缺点是性能（另请参阅：jQuery to call CSS3 fade animation?）。
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 过渡的旧浏览器的人会立即看到元素弹出，我认为这比断断续续的动画更好的用户体验。
我来这里是为了寻找与上述相同的答案：淡入引导警报。在深入研究 Bootstrap 的代码和 CSS 之后，答案相当简单。不要将“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 以获取使用超时的示例（感谢 John Lehmann！）：http://jsfiddle.net/QAz2U/3/
【讨论】：
fade 和 in 类是否关联。如标记class="alert alert-success fade in" 所示。 in 类看起来像一个完全独立的类，例如 alert 或 alert-success。最好使用类名faded-in（而fade 应该是faded），过渡是暂时的，但类名仍然存在。
"show" 类而不是 "in"
我不同意 Bootstrap 使用 fade in 的方式（如他们的文档中所见 - http://v4-alpha.getbootstrap.com/components/alerts/），我的建议是避免使用类名 fade 和 in，并避免这种情况一般的模式（目前在这个问题的最高评价答案中可以看到）。
(1) 语义错误 - 转换是暂时的，但类名仍然存在。那么我们为什么要把我们的类命名为fade 和fade in？应该是faded 和faded-in，这样当开发人员阅读标记时，很明显这些元素是faded 或faded-in。 Bootstrap 团队已经为hidden 取消了hide，为什么fade 有什么不同？
(2) 对单个转换使用 2 个类 fade 和 in 会污染类空间。而且，尚不清楚fade 和in 是否相互关联。 in 类看起来像一个完全独立的类，例如 alert 和 alert-success。
最好的解决方案是在元素淡出时使用faded，并在元素淡入时用faded-in 替换该类。
所以回答这个问题。我认为警报标记、样式和逻辑应该按以下方式编写。 注意：如果您使用的是原生 javascript，请随意替换 jQuery 逻辑。
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)
【讨论】：
当前的答案都不适合我。我正在使用 Bootstrap 3。
我喜欢 Rob Vermeer 的所作所为，并从他的回应开始。
对于一个淡入再淡出的效果，我只是用写了下面的函数并使用了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>
【讨论】：
对于 2.3 及以上版本，只需添加：
$(".alert").fadeOut(3000 );
引导：
<div class="alert success fade in" data-alert="alert" >
<a class="close" data-dismiss="alert" href="#">×</a>
// code
</div>
适用于所有浏览器。
【讨论】：
您可以使用 jquery 淡入一个框。使用 'hide' 类中内置的引导程序在 div 元素上有效地设置 display:none：
<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>
然后在jquery中使用fadeIn函数，像这样：
$("#saveAlert").fadeIn();
还有为fadeIn函数指定一个持续时间，例如： $("#saveAlert").fadeIn(400);
使用fadeIn函数的详细信息可以在官方jQuery文档网站上找到：http://api.jquery.com/fadeIn/
顺便说一句，如果您不使用 jquery，您可以将“隐藏”类添加到您自己的 CSS 文件中，或者将其添加到您的 div 中：
<div style="display:none;" id="saveAlert">
然后你的 div 基本上会默认设置为隐藏，然后 jQuery 会执行fadeIn 动作，强制显示 div。
【讨论】：
当然，是的。在你的项目中使用这个简单的文件：https://gist.github.com/3851727
首先像这样添加你的HTML：
<div id="messagebox" class="alert hide"></div>
然后使用：
$("#messagebox").message({text: "Hello world!", type: "error"});
您可以将所有引导警报类型（例如error、success 和warning）作为选项传递给type 属性。
【讨论】：
将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);
});
});
【讨论】：
我用的是这个：
在您的模板中的警报区域
<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!');
【讨论】：