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

Posted 2023-02-21

【中文标题】如何使用 Twitter Bootstrap 自动关闭警报

【英文标题】：How to Automatically Close Alerts using Twitter Bootstrap

【发布时间】：2011-11-30 09:27:59

【问题描述】：

我正在使用 twitter 的引导 CSS 框架（这太棒了）。对于给用户的一些消息，我使用警报 javascript JS 和 CSS 显示它们。

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

我的问题是这样的；在我向用户显示警报后，我希望它在一段时间后消失。根据 twitter 的文档和我查看的代码，它看起来不像这样：

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

【问题讨论】：

看看这里***.com/questions/23101966/…这是我找到的最佳答案

【参考方案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);

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

【讨论】：

嘿，杰西，谢谢！ setTimeout 有效，我将选择它作为有效的解决方案，但似乎该行为实际上应该按照 TK Kocheran 所述（并记录）进行烘焙。

我查看了 twitter 引导代码，没有看到对自动关闭警报的任何支持。

是的——我正在等待 TK 的回复，因为从他的消息来看，自动关闭功能应该存在，但不存在——但 github 上的错误报告没有提及。

是的，他们并没有声称能够自动关闭警报，只是能够使用提供的 jQuery 插件以编程方式关闭它们。即$('#myAlert').alert('close') 不像宣传的那样工作。

您可能想要扩展 jQuery 并将该方法从对象分派出去，例如：$('#my_fancy_alert').createAutoClosingAlert(2000)。您只需要在setTimeout 回调中传递$(this).remove() 或$(this).alert('close')。

【参考方案2】：

我也无法让它与 alert.('close') 一起工作。

但是我正在使用它，它很管用！警报会在 5 秒后消失，一旦消失，其下方的内容会滑到其自然位置。

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

【讨论】：

绝对是一个很好的解决方案。警报在短暂的间隔后消失得非常好。看起来很专业。

确实工作得又快又好。

每次显示警报时都必须调用它，还是自动为所有.alert-message 类的警报工作？遇到问题，我的 BS3 警报上的类是 alert alert-danger alert-block，那么我应该在超时函数中使用 .alert、alert-danger 还是使用完整的类名？

@raffian 这样写：$(".alert-message,.alert-danger,.alert-info") 等等。您必须弄清楚是否要在整个网站中使用它。如果您希望在每个页面中都使用它，例如，在 Laravel 的刀片中，您可以使用 @include('scripts-alerts') 或 @yield('alerts') 之类的东西。您必须在 *** 中找出或提出特定问题，而不是在这里......

最好的方法。应该标记为正确答案@Mario Zigliotto，因为其他元素会慢慢向上滑动并且不会立即改变它们的位置。这看起来更加美丽和专业。

【参考方案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'); 
    );

【参考方案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);

【参考方案5】：

这是咖啡版：

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

【参考方案6】：

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

页面加载

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

一旦需要显示警报

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

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

【参考方案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);     

【参考方案8】：

我需要一个非常简单的解决方案来在一段时间后隐藏某些东西并设法让它发挥作用：

在角度你可以这样做：

$timeout(self.hideError,2000);

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

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

所以现在我的对话框/用户界面可以使用这些属性来隐藏元素。

【参考方案9】：

有延迟和淡出：

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

【参考方案10】：

试试这个

$(function () 

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

        , 3000)

);