Bootstrap警报自动关闭

Question

我需要在单击Add to Wishlist按钮时调用警报,并在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>

Answer 1

为了顺利滑动:

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

小提琴

Answer 2

fadeTo()在"I Can Has Kittenz"的代码中,使用一个在2秒内淡化为500的不透明度的代码对我来说是不可读的.我认为最好使用其他选项,如延迟()

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

Answer 3

为什么所有其他答案slideUp都在我身边.因为我正在使用fade和in类来关闭时(或超时后)警报消失,我不希望它"向上滑动"并与之冲突.

此外,该slideUp方法甚至没有工作.警报本身根本没有显示.这对我来说非常有用:

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

Answer 4

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

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

Answer 5

我知道这个线程很旧，但我只是想为 Bootstrap 5 添加我的脚本，以防其他人需要它

<script>
    setTimeout(function() {
        bootstrap.Alert.getOrCreateInstance(document.querySelector(".alert")).close();
    }, 3000)
</script>

Answer 6

另外一个解决方案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>