I know this is from a year ago but I'm having the same exact issue however changing it from a <button>
to an <a>
didn't help.
Additionally from Javascript I can't call $('#USPSModal').modal('show');
as it says it's not a function.
The weird part is if I put two modal div's with different ID's the second one always works but the first one never does.
This is what I have at the moment. I had it inside my form tag and inside my UpdatePanel I tried outside the UpdatePanel and outside the Form tag but got the same results. It always navigates the page instead of showing the modal window.
<a class="btn btn-info btn-lg" data-toggle="modal" data-target="#USPSModal">Open Modal</a>
<!-- Modal -->
<div id="USPSModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">USPS Address Check</h4>
</div>
<div class="modal-body">
<div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<asp:Label ID="LabelUserEnteredAddress" runat="server" />
</div>
<div class="col-md-6">
<asp:Label ID="LabelUSPSAddress" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>