Menu
i've been trying to call bootstrap modal from jquery and keep getting this error message :
TypeError: $(...).modal is not a function
Here is my code :
<button id="btnTest" class="btn btn-default">Show Modal</button>
<div id="dummyModal" role="dialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p>Quick Brown Fox Jumps Over The Lazy Dog</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript">
$('document').ready(function () {
$('#btnTest').click(function () {
$('#dummyModal').modal('show');
});
});
</script>
FYI, i use bootstrap 3.3.5 and jquery 1.11.3. i've tried jQuery.noConflict(); ... etc from this thread but still no luck. Here's the complete code
879
There are few ways to close modal in Bootstrap: click on a backdrop, close icon, or close button. You can also use JavaScript hide method. Click the button to launch the modal. Then click on the backdrop, close icon or close button to close the modal.
Use this.
It will work.
I have used bootstrap 3.3.5 and jquery 1.11.3
$('document').ready(function() {
$('#btnTest').click(function() {
$('#dummyModal').modal('show');
});
});body {
background-color: #eee;
padding-top: 40px;
padding-bottom: 40px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Modal Test</title>
</head>
<body>
<div class="container">
<button id="btnTest" class="btn btn-default">Show Modal</button>
<div id="dummyModal" role="dialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p>Quick Brown Fox Jumps Over The Lazy Dog</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>I had also faced same error when i was trying to call bootstrap modal from jquery. But this happens because we are using bootstrap modal and for this we need to attach one cdn bootstrap.min.js which is
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Hope this will help as I missed that when i was trying to call bootstrap modal from jQuery using
$('#button').on('click',function(){
$('#myModal').modal();
});
myModal is the id of Bootstrap modal
and you have to give a click event to a button when you call click that button a pop up modal will be displayed.
8
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
