Javascript Bootstrap 关闭模式不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38537651/
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 close modal not working
提问by NoorUllah
I have two button here that are being used to close the modal. The first is the close icon and the other one is cancel button, both use data-dismiss to close the modal. However, both of them are not working. I am using the same code for another modal and there they are working fine. Any guesses?
我这里有两个按钮用于关闭模态。第一个是关闭图标，另一个是取消按钮，都使用 data-dismiss 关闭模态。但是，它们都不起作用。我对另一个模态使用相同的代码，并且它们工作正常。有什么猜测吗？
<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal">
<div class="modal-dialog">
<div id="timeSelectModalContent" class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<label>
<input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox">
<label class="checkbox-label">Thursday, 08:00 pm.</label>
</label>
<br>
<label>
<input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox">
<label class="checkbox-label">Thursday, 09:30 pm.</label>
</label>
<div id="time-modal-footer" class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button>
</div>
</div>
</div>
</div>
回答by Dave Dold
Very old topic but it still shows up first for people searching this problem, likely caused by them making the same simple mistake I did which was failing to ensure that the modal div was outside of the main body div from which it was launched. To use the Material Kit as an example, you should double check that the target "#myModal" div is outside the closing div tag for your main container.
很老的话题，但它仍然首先出现在搜索这个问题的人身上，这可能是因为他们犯了和我一样的简单错误，未能确保模态 div 位于启动它的主体 div 之外。以 Material Kit 为例，您应该仔细检查目标“#myModal”div 是否在主容器的结束 div 标签之外。
<div class="main main-raised">
<div class="container">
<!-- modals -->
<div class="row" id="modals">
<div class="col-md-6">
<button class="btn btn-primary btn-raised btn-round" data-toggle="modal" data-target="#myModal">
Classic modal
</button>
</div>
</div>
<!-- end modals -->
</div>
</div>
<!-- Classic Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Hey hey</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-simple">Nice Button</button>
<button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
回答by Shyam Mahato
remove the "fade" class.
删除“淡入淡出”类。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">change to
改成
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
回答by Yashwardhan Pauranik
First check you have included bootstrap.js file in your html correctly.
首先检查您是否在 html 中正确包含了 bootstrap.js 文件。
You can try this code and replace the button tag for closing modal by -
您可以尝试使用此代码并通过以下方式替换用于关闭模式的按钮标记 -
<a href="#" class="close" data-dismiss="modal" aria-label="close">×</a>
If still doesn't work.. Let me know.!
如果仍然不起作用..让我知道。！
You can add an on-click event on close button in jQuery. Like this-
您可以在 jQuery 中的关闭按钮上添加点击事件。像这样-
$("#yourModal").modal("hide");
回答by Mr. HK
Here is my implementation of a modal you can use for comparing to help troubleshoot what errors exist in your modal code.
这是我对模态的实现，您可以使用它进行比较，以帮助解决模态代码中存在的错误。
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h2>click Here</h2>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
回答by nikhil
Give ID 'modalClose' to Model's Close button and ID 'myView' to your Model,
为模型的关闭按钮提供 ID 'modalClose'，为您的模型提供 ID 'myView'，
then use the following code:
然后使用以下代码：
<script>
$(function () {
$('#modalClose').on('click', function () {
$('#myView').hide();
})
})
</script>
It will work like a charm.
它会像魅力一样发挥作用。
回答by nazmulhaqued
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
始终尝试将模态的 HTML 代码放在文档中的顶级位置，以避免其他组件影响模态的外观和/或功能。
回答by Gaurav Singh
For me modal was not getting closed because script files had conflict somewere, so used minimum required script files to check the problem in closing model.Way I added scripts for which model was getting closed properly
对我来说，模态没有被关闭，因为脚本文件存在冲突，所以使用最少的脚本文件来检查关闭模型时的问题。我添加了模型正确关闭的脚本
"scripts": [
"src/assets/js/lib/jquery/jquery.min.js",
"src/assets/js/lib/bootstrap/js/popper.min.js",
"src/assets/js/lib/bootstrap/js/bootstrap.min.js"
]
And for sure I had added bootstrap.min.cssin styles.
当然我已经在样式中添加了bootstrap.min.css。
回答by Abhishek
use this code close model
使用此代码关闭模型
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h2>click on button</h2>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>