如何使用Twitter Bootstrap自动关闭警报
如何使用Twitter Bootstrap自动关闭警报
提问于 2011-10-04 12:26:49
我使用的是twitter的bootstrap CSS框架(非常棒)。对于给用户的一些消息，我使用警报Javascript JS和CSS来显示它们。
对于感兴趣的人，可以在这里找到它：http://getbootstrap.com/javascript/#alerts
我的问题是，在我向用户显示警告后，我希望它在一段时间间隔后消失。根据twitter的文档和我看过的代码，它看起来不像是烘焙的：
- 我的第一个问题是要求确认这确实没有包含在Bootstrap
- Secondly，中如何才能实现此行为？
回答 10
Stack Overflow用户
回答已采纳
发布于 2011-10-04 12:37:02
调用window.setTimeout(function, delay)将允许您完成此操作。下面是一个示例，它将在警报显示后2秒(或2000毫秒)自动关闭警报。
$(".alert-message").alert();
window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);如果你想把它包装在一个漂亮的函数中，你可以这样做。
function createAutoClosingAlert(selector, delay) {
var alert = $(selector).alert();
window.setTimeout(function() { alert.alert('close') }, delay);
}然后你就可以像这样使用它。
createAutoClosingAlert(".alert-message", 2000);我确信有更优雅的方法来实现这一点。
Stack Overflow用户
发布于 2011-11-16 02:14:18
我不能让它与警报一起工作。(“关闭”)也是如此。
然而，我正在使用它，它是一种款待！警报将在5秒后消失，一旦消失，其下方的内容将滑到其自然位置。
window.setTimeout(function() {
$(".alert-message").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000);Stack Overflow用户
发布于 2013-10-20 23:19:24
在尝试处理弹出警报和淡出警报时，我也遇到了同样的问题。我找了很多地方，发现这是我的解决方案。添加和删除“in”类解决了我的问题。
window.setTimeout(function() { // hide alert message
$("#alert_message").removeClass('in');
}, 5000);当使用.remove()和类似的.alert('close')解决方案时，我似乎遇到了从文档中删除警报的问题，所以如果我想再次使用相同的警报div，我无法做到。此解决方案意味着警报无需刷新页面即可重用。(我使用aJax提交表单并向用户提供反馈)
$('#Some_Button_Or_Event_Here').click(function () { // Show alert message
$('#alert_message').addClass('in');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7643308
复制相关文章
相似问题