Issue
I have a issue when I try to show a modal with a image click in asp.net+ bootstrap
This is my modal code, I copy this from a web site.
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This is my trigger object:
<img onclick="ShowModal();" data-target="#basicModal" src="Images/productface/<%:prd.pr_facepicpath%>.png" />
This is my script:
<script>
$(function () {
$('#basicModal').modal();
});
function ShowModal() {
$('#basicModal').modal('show');
}
</script>
this is my js libs declaration:
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/modal.js"></script>
I get this error:
TypeError: $(…).modal is not a function
Solution
Its look like you have not include bootstrap modal.js
file.
TypeError: $(…).modal is not a function
Only comes when you have not included modal library.
You can get required js file from https://github.com/jschr/bootstrap-modal
Answered By – Bhavin Solanki
Answer Checked By – Pedro (BugsFixing Volunteer)