Bootstrap 3 - How to fade-in alert box on-click and fade-out after 3 seconds

I am using AngularJS and Bootstrap 3. My web app has an "Update" button where it saves any changes the user makes. When the user clicks on the "Update" button, I want to activate and fade-in bootstrap's alert box saying "Information has been saved" and then fade-out after 3 seconds. I don't know how to create this function and may need some help..


I have decided to use this approach:


<button type="button" class="btn btn-info" ng-click="save()">Update</button>

<div id = "alert_placeholder"></div>


$ = function() {
    $('#alert_placeholder').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>Your information has been updated.</span></div>')
    setTimeout(function() {
    }, 3000);

I would like to make the alert box fade-in when it first appears and fade-out as it gets removed after 3 seconds, but I am not sure how to make it work with the code I have.


I use something like this. (The animation looks very pretty!). Simply add this JS, and apply the class flash to every item you want to disappear. MAKE SURE YOU ALSO ADD THE fade-in CLASS TO EVERYTHING! The fade-in class comes with bootstrap. It will fade out in 5 seconds.

window.setTimeout(function() {
  $(".flash").fadeTo(500, 0).slideUp(500, function(){
}, 5000);

Need Your Help

WCF troubleshooting - async and zero results

.net wcf web-services soap asynchronous

How do you troubleshoot a WCF Service consumption from the client side (silverlight)

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.