bootstrap modal doesn't closes on close button click? - asp.net

Question

i am using bootstrap modal in my asp.net project and my code is
<div id="mymodal" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a id ="closemodal" href="#" class="btn">Close</a>
Save changes
</div>
</div>
and my javascript in my master page is
<script type="text/javascript">
$(function () {
$('#closemodal').click(function () {
$('#mymodal').modal('hide');
});
});
</script>
but the modal doesn't closes when i click close button
in firebug, error is shown with the java-script writing it's not a function

Answer 1

The point of bootstrap is that you shouldn't need that jQuery to get it to work. You can delete that javascript and just add an attribute to your close button and it should work: (it is the data-dismiss="modal" that closes the modal popup.)
<div id="mymodal" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a id="closemodal" href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a>
Save changes
</div>
</div>
You need the bootstrap javascript file included in your master page, which I assume must already be there if you have a modal popup that is popping up as normal.
<script language="JavaScript" type="text/javascript" src="bootstrap.min.js"></script>