jQuery Bootstrap模型不是函数

时间:2019-07-18 19:48:25

标签: jquery bootstrap-4 drupal-7

我试图在单击时打开引导程序模式。我正在使用drupal 7和最新版本的bootstrap。 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

我如何成功打开此模式?

2 个答案:

答案 0 :(得分:0)

检查是否没有两次包含jQuery。

在调用Modal之前检查引导程序的javascript是否已加载

将您的代码包装在

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

只是为了确定

答案 1 :(得分:0)

  1. 如前所述,您正在使用Glide.with(getContext()) .load(R.drawable.ic_test) .apply(new RequestOptions().transforms(new CenterCrop())) .into(this); ,因此不需要Bootstrap4函数。您可以使用按钮上的onclick来打开带有data-target="#exampleModal"的特定id的模态。 下面是相同的示例。 Reference

class="modal"

2。使用<!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>函数

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