Question

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

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

我的问题是这个;在我向用户显示警报后，我希望它在一段时间间隔后消失。基于twitter的文档和我看过的代码看起来似乎没有出现在：

我的第一个问题是要求确认这确实没有被引入Bootstrap
其次，我怎样才能实现这种行为？

Answer 1

调用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);

我确信有更优雅的方法可以实现这一目标。

Answer 2

我无法使用警报。（'关闭'）。

然而，我正在使用它，这是一种享受！警报将在5秒后消失，一旦消失，其下方的内容将滑动到其自然位置。

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

Answer 3

在尝试处理弹出警报和淡化警报时，我遇到了同样的问题。我在各个地方搜索，发现这是我的解决方案。添加和删除'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'); 
    });

Answer 4

在警报上使用“关闭”操作对我不起作用，因为它会从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);
}

Answer 5

这是coffeescript版本：

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

Answer 6

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

页面加载

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

需要显示警报后

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

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

Answer 7

在这里回答了一些答案后，在另一个帖子中，这就是我最终的结果：

我创建了一个名为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);     
}

Answer 8

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

在角度你可以这样做：

$timeout(self.hideError,2000);

这是我在达到超时时调用的函数

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

所以现在我的dialog / ui可以使用这些属性隐藏元素。

Answer 9

延迟和淡出：

#p10 #outer

Answer 10

尝试这个

$(function () {

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

        }, 3000)

});

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

10 个答案: