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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。