jQuery在一定时间后删除引导警报 [英] jQuery remove bootstrap alert after certain amount of time

问题描述

我正在使用示例中的动态引导警报。请参阅下文。

I am using dynamic bootstrap alerts from an example. See below.

如何添加超时功能，以便在 X 时间后警报自动关闭？

How can I add a timeout function so alert closes automatically after X time ?

HTML：

<div id="alert_placeholder"></div>

JQUERY：

bootstrap_alert = function() {
    }
bootstrap_alert.warning = function(message) {
    $('#alert_placeholder').append('<div class="alert alert-block fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><h4>Info!</h4>'+ message +'</div>');
}
bootstrap_alert.info = function(message) {
    $('#alert_placeholder').append('<div class="alert alert-block alert-info fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><h4>Info!</h4>'+ message +'</div>');
}

推荐答案

创建一个删除第一个（因此，最老的）警报：

Create a function that removes the first (hence, oldest) alert:

function alertTimeout(wait){
    setTimeout(function(){
        $('#alert_placeholder').children('.alert:first-child').remove();
    }, wait);
}

[0] 确保每次超时仅删除第一个警报。

[0] to ensure that only the first alert gets removed, for each timeout.

然后在显示警报时调用该函数，参数为警报关闭前的时间长度，以毫秒为单位：

And then call the function when you show the alert, with the parameter being how long until the alert closes, in milliseconds:

bootstrap_alert.warning = function(message) {
    $('#alert_placeholder').append('<div class="alert alert-block fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><h4>Info!</h4>'+ message +'</div>');
    alertTimeout(5000);
}

请看这 jsFiddle

这篇关于jQuery在一定时间后删除引导警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！