可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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
回答1:
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>
回答2:
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.
回答3:
If you are using any layout page then, move script sections from bottom to head section in layout page. bcz, javascript files should be loaded first. This worked for me
