发表新帖
发表新帖

Bootstrap : TypeError: $(…).modal is not a function

前端 未结
关注
5 575
青春惊慌失措
青春惊慌失措 2020-12-17 10:15

i\'ve been trying to call bootstrap modal from jquery and keep getting this error message :

TypeError: $(...).modal is not a function

Here

相关标签:
5条回答
  • 青春惊慌失措
    2020-12-17 10:41

    I was getting the same error because of jquery CDN (<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>) was added two times in the HTML head.

    0 讨论(0)
  • 失恋的感觉
    2020-12-17 10:46

    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.

    0 讨论(0)
  • 离开以前
    2020-12-17 10:53

    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">&times;</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>

    0 讨论(0)
  • 慢半拍i
    2020-12-17 10:56

    Adding the jquery*.js file reference twice can also cause the issue. It could be part of your bundle and you might have added to the page too. Hence you need to remove the additional reference like

    0 讨论(0)
  • 广开言路
    2020-12-17 10:57

    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

    0 讨论(0)
 看不清?
提交回复
热议问题