Twitter Bootstrap alert message close and open again
Data-dismiss completely removes the element. Use jQuery's .hide() method instead.
The fix-it-quick method:
Using inline javascript to hide the element onclick like this:
<div class="alert" style="display: none">
<a class="close" onclick="$('.alert').hide()">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<a href="#" onclick="$('alert').show()">show</a>
http://jsfiddle.net/cQNFL/
This should however only be used if you are lazy (which is no good thing if you want an maintainable app).
The do-it-right method:
Create a new data attribute for hiding an element.
Javascript:
$(function(){
$("[data-hide]").on("click", function(){
$("." + $(this).attr("data-hide")).hide()
// -or-, see below
// $(this).closest("." + $(this).attr("data-hide")).hide()
})
})
and then change data-dismiss to data-hide in the markup. Example at jsfiddle.
$("." + $(this).attr("data-hide")).hide()
This will hide all elements with the class specified in data-hide, i.e: data-hide="alert"
will hide all elements with the alert class.
Xeon06 provided an alternative solution:
$(this).closest("." + $(this).attr("data-hide")).hide()
This will only hide the closest parent element. This is very useful if you don't want to give each alert a unique class. Please note that, however, you need to place the close button within the alert.
Definition of .closest from jquery doc:
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
I just used a model variable to show/hide the dialog and removed the data-dismiss="alert"
Example:
<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">×</button>
<strong>Error ! </strong>{{vm.exception}}
</div>
works for me and stops the need to go out to jquery