javascript Bootstrap 模式弹出窗口不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33803437/
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 modal popup not working
提问by Ritz Arlekar
I have a simple HTML file in which I want to display Bootstrap modal popup. Below is the code for this.
我有一个简单的 HTML 文件，我想在其中显示 Bootstrap 模式弹出窗口。下面是这个的代码。
.js file:
.js 文件：
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/po_ritesh/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/home.css">
<script src="./js/global.js"></script>
<script src="./js/home.js"></script>
button control:
按钮控制：
<button class="myBtn" type="button" data-toggle="modal" data-target="#myModal">test </button>
modal div:
模态div：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
回答by Ray
you have to include bootstrap.min.js after the jQuery.js
你必须在 jQuery.js 之后包含 bootstrap.min.js
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
回答by laylarenee
You have twoproblems:
你有两个问题：
- You are missing a library,
bootstrap.js - Your JavaScript files are referenced in the wrong order, causing a JavaScript error. This error prevents your browser from running additional script and the modal code doesn't work.
- 你缺少一个图书馆，
bootstrap.js - 您的 JavaScript 文件以错误的顺序被引用，从而导致 JavaScript 错误。此错误会阻止您的浏览器运行其他脚本，并且模式代码不起作用。
Try this:
试试这个：
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- this file was missing -->
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<!-- this file was moved after the jQuery Datatables library was laoded -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
回答by Sinned Lolwut
You are not including the bootstrap.js in your code.
您没有在代码中包含 bootstrap.js。
