Bootstrap:TypeError:$(...).modal不是函数 [英] Bootstrap : TypeError: $(...).modal is not a function
本文介绍了Bootstrap:TypeError:$(...).modal不是函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在尝试从jquery调用引导程序模式，并不断收到此错误消息:
i've been trying to call bootstrap modal from jquery and keep getting this error message :
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，但还是没有运气.这是完整代码
FYI, i use bootstrap 3.3.5 and jquery 1.11.3. i've tried jQuery.noConflict(); ... etc from this thread but still no luck. Here's the complete code
推荐答案
使用此功能.
会工作的.
我用过bootstrap 3.3.5和jquery 1.11.3
Use this.
It will work.
I have used bootstrap 3.3.5 and 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>
这篇关于Bootstrap:TypeError:$(...).modal不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
