我使用的是twitter的bootstrap CSS框架(非常棒)。对于给用户的一些消息,我使用警报Javascript JS和CSS来显示它们。
对于感兴趣的人,可以在这里找到它:http://getbootstrap.com/javascript/#alerts
我的问题是,在我向用户显示警告后,我希望它在一段时间间隔后消失。根据twitter的文档和我看过的代码,它看起来不像是烘焙的:
发布于 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);
我确信有更优雅的方法来实现这一点。
发布于 2011-11-16 02:14:18
我不能让它与警报一起工作。(“关闭”)也是如此。
然而,我正在使用它,它是一种款待!警报将在5秒后消失,一旦消失,其下方的内容将滑到其自然位置。
window.setTimeout(function() {
$(".alert-message").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000);
发布于 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');
});
https://stackoverflow.com/questions/7643308
复制相似问题