Bootstrap警报自动关闭

我的需求是当我点击添加到愿望列表按钮时调用警报，并应在2秒内消失警报。这就是我的尝试，但是一旦它出现，警报就会立即消失。不知道，错误在哪里..任何人都可以帮我解决问题吗？Bootstrap警报自动关闭

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>

来源

2014-04-16 srikanth_naalla

的可能重复http://stackoverflow.com/questions/16604407/jquery-remove-bootstrap-alert -after-certain-amount-of-time和http://stackoverflow.com/questions/7643308/how-to-automatically-close-alerts-using-twitter-bootstrap – 4dgaurav

我试过这些流..但不知道如何实行。：/ –

188

对于平滑效果基本show：

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

Fiddle

来源

2014-04-16 07:06:02

第二次点击按钮时不起作用。因为alert（'close'）如果你使用slideUp（），它的工作@ICanHasKittenz –

工程很漂亮，但是这行是什么$（“＃success-alert”）。用法？我已经删除它，并且工作。 –

@RobertoSepúlvedaBravo它提供了关闭警报框的功能，但你是对的，在这里不需要，因为我们使用'data-dimiss =“alert”'属性。将更新脚本。 –

使用fadeTo()是褪色的500在2秒不透明度“我能有Kittenz”的代码不可读给我。我认为这是更好的使用等造成的延迟（）

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

来源

2014-08-14 23:51:16

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

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

来源

2015-06-14 22:00:55 Jaimie

为什么所有的其他的答案用slideUp的是刚刚超过其他选项。由于我使用fade和in类来关闭警报（或超时后），因此我不希望它“滑动”并与其发生冲突。

除了slideUp方法甚至没有工作。警报本身并没有显示出来。以下是完全为我工作：

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

来源

2015-07-12 13:48:00 ADTC

此自动关闭或消逝引导警告消息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>

来源

2015-09-17 12:30:42

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

凡fadeTo参数是fadeTo（速度，不透明度）

来源

2016-04-28 19:05:10

Bootstrap警报自动关闭

回答

相关问题