jquery bootstrap modal不是一个函数答案

【问题标题】：jquery bootstrap model is not a functionjquery bootstrap modal不是一个函数
【发布时间】：2019-07-18 19:48:25
【问题描述】：

我正在尝试在点击时打开引导模式。我正在使用 drupal 7 和最新版本的引导程序。 4.3.1

JS 文件

jQuery.noConflict();
(function($){
 $(function() {
  $('#myButton').click(function (e) {
    console.log('button clicked');
    $('#exampleModal').modal('show');
    });
  });
})(jQuery);

HTML

<div id='exampleModal'>

当我运行它时，我得到了

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

我怎样才能成功打开这个模态？

【问题讨论】：

标签： jquery bootstrap-4 drupal-7

【解决方案1】：

正如您提到的，您使用的是Bootstrap4，您不需要onclick 函数。您可以在按钮上使用data-target="#exampleModal" 来打开带有特定id 和class="modal" 的模式。以下是相同的示例。 Reference

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Modal Example</h2>
    <!-- Button to Open the Modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

    <!-- The Modal -->
    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            Modal body..
          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>

        </div>
      </div>
    </div>

  </div>

</body>

</html>

2.使用click函数

$(document).ready(function() {
  $('.btn-primary').click(function() {
    $('#exampleModal').modal('show');
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Modal Example</h2>
    <!-- Button to Open the Modal -->
    <button type="button" class="btn btn-primary">
    Open modal
  </button>

    <!-- The Modal -->
    <div class="modal" id="exampleModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            Modal body..
          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>

        </div>
      </div>
    </div>

  </div>

</body>

</html>

【讨论】：

【解决方案2】：

检查 jQuery 是否包含两次。

在调用 Modal 之前检查 bootstrap 的 javascript 是否已加载

把你的代码包装进去

$(document).ready(function($) {
   //your code
}

只是为了确定

【讨论】：

请注意 $(document).on( "ready", handler )，自 jQuery 1.8 起已弃用。您应该改用 $( handler )