我试图在单击时打开引导程序模式。我正在使用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
我如何成功打开此模式?
答案 0 :(得分:0)
检查是否没有两次包含jQuery。
在调用Modal之前检查引导程序的javascript是否已加载
将您的代码包装在
中$(document).ready(function($) {
//your code
}
只是为了确定
答案 1 :(得分:0)
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">×</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');
});
});