jquery – Bootstrap:TypeError:$(…).modal不是函数

前端之家收集整理的这篇文章主要介绍了jquery – Bootstrap:TypeError:$(…).modal不是函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在尝试从 jquery调用bootstrap模式并继续收到此错误消息:
  1. TypeError: $(...).modal is not a function

这是我的代码

  1. <button id="btnTest" class="btn btn-default">Show Modal</button>
  2. <div id="dummyModal" role="dialog" class="modal fade">
  3. <div class="modal-dialog">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <button type="button" data-dismiss="modal" class="close">&times;</button>
  7. <h4 class="modal-title">Error</h4>
  8. </div>
  9. <div class="modal-body">
  10. <p>Quick Brown Fox Jumps Over The Lazy Dog</p>
  11. </div>
  12. <div class="modal-footer">
  13. <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
  14. </div>
  15. </div>
  16. </div>
  17. </div>
  18. </div>
  19. <script type="text/javascript" src="/js/jquery-1.11.3.js"></script>
  20. <script type="text/javascript" src="/js/bootstrap.js"></script>
  21. <script type="text/javascript">
  22. $('document').ready(function () {
  23. $('#btnTest').click(function () {
  24. $('#dummyModal').modal('show');
  25. });
  26. });
  27. </script>

仅供参考,我使用bootstrap 3.3.5和jquery 1.11.3.我试过jQuery.noConflict();等等从this thread开始,但仍然没有运气.这是complete code

解决方法

用这个.
它会工作.
我使用了bootstrap 3.3.5和jquery 1.11.3
  1. $('document').ready(function() {
  2. $('#btnTest').click(function() {
  3. $('#dummyModal').modal('show');
  4. });
  5. });
  1. body {
  2. background-color: #eee;
  3. padding-top: 40px;
  4. padding-bottom: 40px;
  5. }
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <Meta charset="utf8">
  6. <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <Meta name="viewport" content="width=device-width,initial-scale=1">
  8. <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9. <title>Modal Test</title>
  10. </head>
  11.  
  12. <body>
  13. <div class="container">
  14. <button id="btnTest" class="btn btn-default">Show Modal</button>
  15. <div id="dummyModal" role="dialog" class="modal fade">
  16. <div class="modal-dialog">
  17. <div class="modal-content">
  18. <div class="modal-header">
  19. <button type="button" data-dismiss="modal" class="close">&times;</button>
  20. <h4 class="modal-title">Error</h4>
  21. </div>
  22. <div class="modal-body">
  23. <p>Quick Brown Fox Jumps Over The Lazy Dog</p>
  24. </div>
  25. <div class="modal-footer">
  26. <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  33. <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  34. </body>
  35.  
  36. </html>

猜你在找的jQuery相关文章