I'm attempting to utilize a Bootstrap alert for displaying a warning. The alert automatically fades and dismisses after a period of time, but I want to provide the user with the option to manually close it. I've included jQuery and js/bootstrap.min.js in the recommended order based on responses to similar inquiries.
Here is my HTML code:
<div class="alert alert-warning alert-dismissible errormessage" role="alert"
style="display: none;">
<button type="button" class="close" data-dismiss="alert"
ng-click="dismissError()">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
{{ errormessage }}
</div>
And this is my JavaScript:
//sets errormessage to be displayed
function displayError(error) {
if(error){
$scope.errormessage = error;
$('.errormessage').fadeIn(300).delay(5000).fadeOut(500);
}
$scope.dismissError = function() {
$scope.errormessage = '';
$('.errormessage').hide();
};
CSS:
.errormessage{
position: fixed;
top: 1%;
left: 50%;
margin-left: -250px;
width: 500px;
padding-top: 5px;
padding-bottom: 5px;
z-index: 9999;
text-align: center;
}
The default close functionality doesn't seem to be working, so I also attempted to implement the dismissError function to manually close the alert, but upon debugging, it appears that the code doesn't enter my function.
NOTE: I've already tried:
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">×
</button>
and
<button type="button" class="close" data-dismiss="alert"
onclick="$('.alert').hide()" aria-hidden="true">×
</button>
both of which had no effect. I also attempted changing the z-index to 2, but still couldn't close the alert. Thank you for all the assistance!
PS: I'm implementing this within a Chrome app that I'm developing