如何使用Twitter Bootstrap自动closures警报
我使用twitter的引导CSS框架（这是太棒了）。 对于一些给用户的消息，我使用警告JavaScript JS和CSS显示它们。
对于那些感兴趣的，可以在这里find： http ： //getbootstrap.com/javascript/#alerts
我的问题是这个; 在向用户显示警告之后，我希望在一段时间之后才会离开。 基于Twitter的文档和我通过它看的代码看起来像这不是在：
- 我的第一个问题是一个请求确认，这确实不被引入Bootstrap
- 其次，我怎么能做到这一点？
调用window.setTimeout(function, delay)将允许您完成此操作。 下面是一个示例，它将在显示后自动closures警报2秒（或2000毫秒）。
$(".alert-message").alert(); window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);
如果你想包装它在一个漂亮的function，你可以做到这一点。
function createAutoClosingAlert(selector, delay) { var alert = $(selector).alert(); window.setTimeout(function() { alert.alert('close') }, delay); }
那么你可以像这样使用它…
createAutoClosingAlert(".alert-message", 2000);
我相信有更多的优雅的方法来完成这一点。
我无法使用alert（'close'）。
不过，我正在使用这个，它可以工作！ 警报将在5秒后消失，一旦消失，下面的内容将滑动到自然位置。
window.setTimeout(function() { $(".alert-message").fadeTo(500, 0).slideUp(500, function(){ $(this).remove(); }); }, 5000);
当我尝试处理爆出警报并将其消除时，我也遇到了同样的问题。 我search了各地，发现这是我的解决scheme。 添加和删除“in”类修复了我的问题。
window.setTimeout(function() { // hide alert message $("#alert_message").removeClass('in'); }, 5000);
当使用.remove（）和类似的.alert（'close'）解决scheme时，我似乎遇到了从文档中删除警报的问题，所以如果我想再次使用相同的警告div，我无法。 此解决scheme意味着警报可以重新使用，而无需刷新页面。 （我正在使用Ajax来提交表单并向用户提供反馈）
$('#Some_Button_Or_Event_Here').click(function () { // Show alert message $('#alert_message').addClass('in'); });
在警报上使用“close”操作对我来说不起作用，因为它会从DOM中删除警报，我需要多次警报（我使用ajax发布数据，并且在每个post中向用户显示一条消息） 。 所以我创build了这个函数，每次需要时都会创build一个警报，然后启动一个计时器来closures创build的警报。 我将函数传递给我要添加警报的容器的id，警告的types（'success'，'danger'等）和消息。 这是我的代码：
function showAlert(containerId, alertType, message) { $("#" + containerId).append('<div class="alert alert-' + alertType + '" id="alert' + containerId + '">' + message + '</div>'); $("#alert" + containerId).alert(); window.setTimeout(function () { $("#alert" + containerId).alert('close'); }, 2000); }
我实现了一个JavaScript库，它具有你所要求的function： https ： //gist.github.com/1569896
这是coffescript版本：
setTimeout -> $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove())) ,5000
随着上述每个解决scheme，我继续失去警报的可用性。 我的解决scheme如下：
在页面加载
$("#success-alert").hide();
一旦警报需要显示
$("#success-alert").show(); window.setTimeout(function () { $("#success-alert").slideUp(500, function () { $("#success-alert").hide(); }); }, 5000);
请注意，fadeTo将不透明度设置为0，所以显示为none，不透明度为0，这就是为什么我从我的解决scheme中删除。
它似乎已经坏了。 我在这里用一个testing用例报告了这个问题： https ： //github.com/twitter/bootstrap/issues/366
你可以在这里查看我的代码： http : //jsdo.it/rfkrocktk/bRrV
在这里回答一些在另一个线程的答案，这是我最后的结果：
我创build了一个名为showAlert()的函数，它将dynamic地添加一个警报，使用可选type和closeDealy 。 例如，你可以添加一个警告types的danger （即Bootstrap的警报危险），5秒后会自动closures，如下所示：
showAlert("Warning message", "danger", 5000);
为了达到这个目的，添加下面的Javascript函数：
function showAlert(message, type, closeDelay) { if ($("#alerts-container").length == 0) { // alerts-container does not exist, add it $("body") .append( $('<div id="alerts-container" style="position: fixed; width: 50%; left: 25%; top: 10%;">') ); } // default to alert-info; other options include success, warning, danger type = type || "info"; // create the alert div var alert = $('<div class="alert alert-' + type + ' fade in">') .append( $('<button type="button" class="close" data-dismiss="alert">') .append("×") ) .append(message); // add the alert div to top of alerts-container, use append() to add to bottom $("#alerts-container").prepend(alert); // if closeDelay was passed - set a timeout to close the alert if (closeDelay) window.setTimeout(function() { alert.alert("close") }, closeDelay); }
我需要一个非常简单的解决scheme来隐藏某些东西，并设法让这个工作：
在angular度你可以做到这一点：
$timeout(self.hideError,2000);
这是我在达到超时时调用的函数
self.hideError = function(){ self.HasError = false; self.ErrorMessage = ''; };
所以现在我的dialog / ui可以使用这些属性来隐藏元素。
随着延迟和淡入淡出：
setTimeout(function(){ $(".alert").each(function(index){ $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){ $(this).remove(); }); }); },2000);
