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..
UPDATE:
I have decided to use this approach:
HTML
<button type="button" class="btn btn-info" ng-click="save()">Update</button>
<div id = "alert_placeholder"></div>
JavaScript
$scope.save = function() {
$('#alert_placeholder').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>Your information has been updated.</span></div>')
setTimeout(function() {
$("div.alert").remove();
}, 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.