Bootstrap Alert Auto Close

Question

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>

Solution 1

For a smooth slideup:

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

---

$(document).ready(function() {
  $("#success-alert").hide();
  $("#myWish").click(function showAlert() {
    $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
      $("#success-alert").slideUp(500);
    });
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="product-options">
  <a id="myWish" href="javascript:;" 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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Solution 2

Using a fadeTo() that is fading to an opacity of 500 in 2 seconds in "I Can Has Kittenz"'s code isn't readable to me. I think it's better using other options like a delay()

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

Solution 3

Why all the other answers use slideUp is just beyond me. As I'm using the fade and in classes to have the alert fade away when closed (or after timeout), I don't want it to "slide up" and conflict with that.

Besides the slideUp method didn't even work. The alert itself didn't show at all. Here's what worked perfectly for me:

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

Solution 4

I found this to be a better solution

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

Solution 5

one more solution for this Automatically close or fade away the bootstrap alert message after 5 seconds:

This is the HTML code used to display the message:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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


<script type="text/javascript">

$(document).ready(function () {
 
window.setTimeout(function() {
    $(".alert").fadeTo(1000, 0).slideUp(1000, function(){
        $(this).remove(); 
    });
}, 5000);
 
});
</script>

It's not limited to showing the message through JS, the message could already be displayed when the page loads.

View more solutions

Comments

[4dgaurav]

possible duplicate of stackoverflow.com/questions/16604407/… and stackoverflow.com/questions/7643308/…

[Fatih Alp]

It's not working second time you clicked the button. Because of alert('close') If you use slideUp() it's working @ICanHasKittenz

[Roberto Sepúlveda Bravo]

Works beautiful, but what's this line $("#success-alert").alert(); usage? I've removed it and works too.

[AyB]

@RobertoSepúlvedaBravo it's to give the close functionality to the alert box but you are right, it's not needed here because we are using the data-dimiss="alert" attribute. Will update the script.

[Terje Nesthus]

Did not work for me. The other below here examples worked fine, however.

[AyB]

@TerjeNesthus Can you explain what exactly didn't work? The alert is not sliding up? Or it's not working the second time? Can I know the version of your bootstrap? This was meant to be for Bootstrap 3 and I haven't tested them on the later versions.

[Dariux]

Why inside callback there is slideUp again? It works from me this way: $('.alert-success').fadeTo(2000, 500).slideUp(1000);

[Guillermo Oramas R.]

This is a very nice answer cause it's not limited to showing the message tru JS, the message could already be displayed when the page loads.

[DazBaldwin]

What's nice about this solution is that you can set the class of your alert to .hidden then remove that class before triggering the .fadeTo() the the .slideUp() function then takes care of everything else. Thanks.

[Nawaraj]

Short and sweet

[Jake]

Good solution. I think replacing #success-alert with .alert is much more practical though as it covers any alert that pops up. i.e. warning, info, success, etc.

[s3c]

For those of us, who try to avoid jQuery, there are simple animation functions available throughout the internetz.

[Muhammad Ali]

it is too fast to look at, isnt it?