twitter-bootstrap Bootstrap 模态正文内容不隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21240776/
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 Body Content Not Hiding
提问by TimNguyenBSM
This Modal works perfectly:
这个模态完美地工作：
<!-- Modal -->
<div class="modal fade" id="company-about" tabindex="-1" role="dialog" aria-labelledby="company-about-label" 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">×</button>
<h4 class="modal-title" id="company-about-label">Company Name</h4>
</div>
<div class="modal-body">
<p>Company bio here...</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This Modal below follows the above Modal immediately, but the Table is showing, rather than being hidden. On click, the Table content is blank. If I delete the Table data and replace with a text, it works as expected:
下面的这个 Modal 立即跟随上面的 Modal，但是表格是显示出来的，而不是被隐藏起来。单击时，表格内容为空白。如果我删除表数据并替换为文本，它会按预期工作：
<!-- Modal -->
<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" 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">×</button>
<h4 class="modal-title" id="fee-details-label">Fees - What this loan will cost you to close</h4>
</div>
<div class="modal-body">
<table class="table table-condensed">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
回答by Joe Conlin
You have to move your code for the modal outside of the table. I typically put modal code at the very bottom of the page before the </body> tag.
您必须将模态代码移到表格外。我通常将模态代码放在页面最底部的 </body> 标记之前。
See working fiddle: http://jsfiddle.net/mty3g/19/
见工作小提琴：http: //jsfiddle.net/mty3g/19/
<body>
<div class="container">
<table class="table table-width-condensed spacer-top">
<tr>
<td><a href="#fee-details" data-toggle="modal">0</a></td>
<td><a href="#company-about" data-toggle="modal">Company Name</a></td>
</tr>
</table>
</div> <!-- /container -->
<!-- Modal -->
<div class="modal fade" id="company-about" tabindex="-1" role="dialog" aria-labelledby="company-about-label" 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">×</button>
<h4 class="modal-title" id="company-about-label">Company Name</h4>
</div>
<div class="modal-body">
<p>Company summary...</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" 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">×</button>
<h4 class="modal-title" id="fee-details-label">Fee Details</h4>
</div>
<div class="modal-body">
<table class="table table-condensed">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
