javascript Bootstrap 模式数据关闭不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26920653/
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 data dismiss not working
提问by ScubaSteve
So, the the data-dismiss="modal"is not working for buttons that are added in my HTML, but is working for buttons that are added to the modal via JS inserting the button HTML. This makes me figure that there's something wrong with where/what order I am adding my scripting tags.
因此，该data-dismiss="modal"不适用于添加到我的 HTML 中的按钮，但适用于通过 JS 插入按钮 HTML 添加到模态的按钮。这让我觉得我添加脚本标签的位置/顺序有问题。
My scripting tags are in this order:
我的脚本标记按以下顺序排列：
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
I tried putting them in the <head>. I moved them to be the last thing right before </body>. I moved them to be right before and right after the modal html.
我试着把它们放在<head>. 我把它们移到了之前的最后一件事</body>。我将它们移动到模态 html 之前和之后。
UPDATE
更新
Here's a simplified version of my code:
这是我的代码的简化版本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site-bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div id="Popup" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div id="PopupHeader">
<button type="button" id="PopupX" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="PopupTitle" class="modal-title floatLeft"></h4>
<div class="clear"></div>
</div>
<div class="modal-body bgColorWhite">
<div id="PopupContent">Test</div>
</div>
<div id="PopupButtons" class="modal-footer bgColorWhite">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
</body>
</html>
Another note:
另一个注意事项：
If I add the "Close" button, aka the X, via JS, it works as well. It's having it already in the modal that causes issues.
如果我通过 JS 添加“关闭”按钮，也就是 X，它也能正常工作。它已经在导致问题的模式中使用它。
Any suggestions?
有什么建议？
回答by ScubaSteve
I was able to figure out my issue. It was that in my own JS file, I wanted to add into every button click event, event.stopPropagation(); Since this was a method, and I did not want this added multiple times to the same button every time it was called, I would remove the previous click events, which was removing Bootstrap's dismiss click event.
我能够弄清楚我的问题。正是在我自己的JS文件中，我想添加到每个按钮点击事件中，event.stopPropagation(); 由于这是一种方法，并且我不希望每次调用时将其多次添加到同一个按钮上，因此我将删除之前的点击事件，即删除 Bootstrap 的解除点击事件。
So, if you have this same issue and you have all of Bootstrap's JS added correctly, check your own code to make sure you're not overwriting/removing events.
因此，如果您遇到同样的问题并且正确添加了所有 Bootstrap 的 JS，请检查您自己的代码以确保您没有覆盖/删除事件。
UPDATE
更新
Just to clarify, event.stopPropagation() prevents data-dismiss from working.
只是为了澄清， event.stopPropagation() 防止数据解除工作。
回答by luchopintado
Try put into 'modal-content' div:
尝试放入 'modal-content' div：
<div class="modal-header">...</div>
<div class="modal-body">
...
your content
...
</div>
<div class="modal-footer">
...
your buttons
...
</div>
