Bootstrap警报自动关闭 [英] Bootstrap Alert Auto Close

问题描述

我需要在点击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 href =＃class =btn btn-mini>购买< / a> 
< / div> 
  

Alert Box：

 < div class =alert alert-successid =success-alert> 
 < strong>成功！ < /强> 
产品已添加到您的愿望清单。 
< / div> 
  

解决方案

$ b

  $（＃success-alert）。fadeTo（2000，500）.slideUp（500，function（）{
 $（ ＃success-alert）。slideUp（500）; 
}）; 
  

小提琴

My need is to call alert when I click on Add to Wishlist button and should disappear the alert in 2 secs. This is how I tried, but the alert is disappearing instantly as soon as it is appearing. Not sure, where the bug is.. Can anyone help me out?

JS Script

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

HTML Code:

<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>

Alert Box:

<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>

解决方案

For a smooth slideup:

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

Fiddle

这篇关于Bootstrap警报自动关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！