如何使用Twitter Bootstrap自动关闭警报

我正在使用twitter的bootstrap CSS框架（太棒了）。对于某些给用户的消息，我正在使用警报Javascript JS和CSS来显示它们。

对于那些感兴趣的人，可以在这里找到：http : //getbootstrap.com/javascript/#alerts

我的问题是这个；在向用户显示警报后，我希望它在一段时间后消失。根据twitter的文档和我浏览过的代码来看，它似乎不存在：

• 我的第一个问题是要求确认是否确实没有引入Bootstrap中
• 其次，如何实现这种行为？

呼叫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);

我敢肯定，有更优雅的方法可以做到这一点。

我也无法使其与alert。（'close'）一起使用。

但是我正在使用它，它可以治疗！警报将在5秒钟后消失，一旦消失，其下方的内容将向上滑动至自然位置。

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);

尝试处理弹出警报并使其褪色时，我遇到了同样的问题。我到处搜寻，发现这是我的解决方案。添加和删​​除“ 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'); 
    });

在警报上使用“关闭”操作对我不起作用，因为它从DOM中删除了警报，并且我需要多次警报（我使用ajax发布数据，并且每条消息都向用户显示一条消息） 。因此，我创建了此函数，该函数在每次需要时都会创建警报，然后启动计时器以关闭创建的警报。我将要向其添加警报的容器的ID，警报的类型（“成功”，“危险”等）和消息传递给该函数。这是我的代码：

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);
}

这是咖啡的版本：

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000

对于上述每种解决方案，我继续失去警报的可重用性。我的解决方案如下：

页面加载

$("#success-alert").hide();

一旦需要显示警报

 $("#success-alert").show();
 window.setTimeout(function () {
     $("#success-alert").slideUp(500, function () {
          $("#success-alert").hide();
      });
 }, 5000);

请注意，fadeTo将不透明度设置为0，因此显示为无，不透明度为0，这就是我从解决方案中删除的原因。

在另一个线程中浏览了一些答案之后，这就是我最终得到的结果：

我创建了一个名为的函数showAlert()，该函数会动态添加一个警报，并带有可选的type和closeDealy。这样您就可以添加一个警报类型danger（即，Bootstrap的警报危险），该警报将在5秒钟后自动关闭，如下所示：

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("&times;")
        )
        .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);     
}

我需要一个非常简单的解决方案，以便在一段时间后隐藏某些东西，并设法使其正常工作：

在角度可以做到这一点：

$timeout(self.hideError,2000);

这是超时时我调用的函数

 self.hideError = function(){
   self.HasError = false;
   self.ErrorMessage = '';
};

因此，现在我的对话框/ UI可以使用这些属性来隐藏元素。

随着延迟和淡入淡出：

setTimeout(function(){
    $(".alert").each(function(index){
        $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
            $(this).remove();
        });
    });
},2000);

试试这个

$(function () {

 setTimeout(function () {
            if ($(".alert").is(":visible")){
                 //you may add animate.css class for fancy fadeout
                $(".alert").fadeOut("fast");
            }

        }, 3000)

});