我一直在尝试从jquery调用bootstrap模式并继续收到此错误消息：
TypeError: $(...).modal is not a function
这是我的代码：
<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">×</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="/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript">
$('document').ready(function () {
$('#btnTest').click(function () {
$('#dummyModal').modal('show');
});
});
</script>
仅供参考，我使用bootstrap 3.3.5和jquery 1.11.3。我从jQuery.noConflict(); ... etc尝试过this thread，但仍然没有运气。这是complete code
用这个。它会工作。我用过bootstrap 3.3.5和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">×</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>当我试图从jquery调用bootstrap模态时，我也遇到了同样的错误。但这是因为我们正在使用bootstrap模式，为此我们需要附加一个cdn bootstrap.min.js，这是
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
希望这会有所帮助，因为当我试图从jQuery使用调用bootstrap模式时我错过了
$('#button').on('click',function(){
$('#myModal').modal();
});
myModal是Bootstrap模式的id，当你调用click按钮时，你必须给按钮一个click事件，弹出模式将被显示。
由于jquery CDN（<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>）在HTML头中添加了两次，我得到了同样的错误。
如果您正在使用任何布局页面，请在布局页面中从底部到头部移动脚本部分。 bcz，应首先加载javascript文件。这对我有用