jQuery Bootstrap : TypeError: $(...).modal 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32326074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap : TypeError: $(...).modal is not a function
提问by sad301
i've been trying to call bootstrap modal from jquery and keep getting this error message :
我一直在尝试从 jquery 调用 bootstrap modal 并不断收到此错误消息：
TypeError: $(...).modal is not a function
Here is my code :
这是我的代码：
<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>
FYI, i use bootstrap 3.3.5 and jquery 1.11.3. i've tried jQuery.noConflict(); ... etcfrom this threadbut still no luck. Here's the complete code
仅供参考，我使用引导程序 3.3.5 和 jquery 1.11.3。我已经jQuery.noConflict(); ... etc从这个线程尝试过，但仍然没有运气。这是完整的代码
采纳答案by Amit singh
Use this.
It will work.
I have used bootstrap 3.3.5and jquery 1.11.3
用这个。它会起作用。我用过 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>回答by Mahtab Alam
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
当我尝试从 jquery 调用引导模式时，我也遇到了同样的错误。但发生这种情况是因为我们使用的是引导模式，为此我们需要附加一个 cdn bootstrap.min.js，它是
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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
希望这会有所帮助，因为我错过了当我尝试使用 jQuery 从 jQuery 调用引导模式时
$('#button').on('click',function(){
$('#myModal').modal();
});
$('#button').on('click',function(){
$('#myModal').modal();
});
myModalis 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.
myModal是 Bootstrap 模态的 id，当您调用单击该按钮时，您必须向按钮提供单击事件，将显示弹出模态。
回答by bSr
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.
我得到了同样的错误，因为 jquery CDN ( <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>) 在 HTML 头部添加了两次。
回答by Raj K
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
如果您正在使用任何布局页面，请在布局页面中将脚本部分从底部移动到头部部分。bcz，应先加载 javascript 文件。这对我有用
