Incorporating AngularJS and Bootstrap 3 into my web app, there is an "Update" button that saves user changes. Upon clicking the "Update" button, I aim to trigger and display bootstrap's alert box with the message "Information has been saved," followed by a fade-out effect after 3 seconds. However, I am unsure about how to implement this functionality and could benefit from some assistance.
UPDATE:
Here is the approach I have decided to take:
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 wish to incorporate a fade-in effect for the alert box when it appears initially and a fade-out effect as it disappears after 3 seconds. However, I am uncertain of how to achieve this using my current code.