Bootstrap Alert 自动关闭

问题描述

当我点击添加到收藏夹按钮时，我的需要是呼叫提醒，并应在 2 秒内消失警报。这是我如何尝试，但一旦出现，警报立即消失。不确定，哪里的错误是谁可以帮助我吗？

JS 脚本

  $(document).ready (function(){
            $("#success-alert").hide();
            $("#myWish").click(function showAlert() {
                $("#success-alert").alert();
                window.setTimeout(function () {
                            $("#success-alert").alert('close'); }, 2000);
                  });
                    });

HTML 代码：

<div class="product-options">
    <a  id="myWish" href=""  class="btn btn-mini" >Add to Wishlist </a>
    <a  href="#" class="btn btn-mini"> Purchase </a>
</div>

警示框：

<div class="alert alert-success" id="success-alert">
    <button type="button" class="close" data-dismiss="alert">x</button>
    <strong>Success! </strong>
    Product have added to your wishlist.
</div>

最佳解决方案

为了平滑滑动：

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").slideUp(500);
});

Fiddle

次佳解决方案

使用 fadeTo()在 “I Can Has Kittenz” 的代码中，在 2 秒内逐渐变为 500 的不透明度对我来说是不可读的。我认为更好的使用其他选项，如 a delay()

$(".alert").delay(4000).slideUp(200, function() {
    $(this).alert('close');
});

第三种解决方案

我发现这是一个更好的解决方案

$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert-dismissible").alert('close');
});

第四种方案

为什么所有其他答案都使用 slideUp 就在我之外。当我使用 fade 和 in 类使得警报在关闭时 (或超时后) 消失，我不想要它与”slide up” 冲突。

除了 slideUp 方法还没有工作。警报本身根本没有显示。这对我来说是完美的：

$(document).ready(function() {
    // show the alert
    setTimeout(function() {
        $(".alert").alert('close');
    }, 2000);
});

第五种方案

另外一个解决方案 5 秒钟后自动关闭或淡出引导警报消息：

这是用于显示消息的 HTML 代码：

<div class="alert alert-danger">
This is an example message...
</div>

JS 片段

<script type="text/javascript">

$(document).ready(function () {

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

});
</script>

参考文献

• Bootstrap Alert Auto Close

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。