Bootstrap 模态正文内容不隐藏答案

【问题标题】：Bootstrap Modal Body Content Not HidingBootstrap 模态正文内容不隐藏
【发布时间】：2014-01-20 17:48:02
【问题描述】：

此模式完美运行：

<!-- 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">&times;</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 -->

下面的这个 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">&times;</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 -->

【问题讨论】：

请张贴到 JSFiddle 或链接到您的页面..
正如我在这里看到的，摆弄你的代码（添加了一个按钮来启动模式）bootply.com/107315，它可以工作....
@Jahnux73 我创建了一个 jsfiddle 但它不工作。 jsfiddle.net/mty3g/14
我想出了如何让它发挥作用。这是Modal的位置。一旦我移动它，它现在工作正常。仍然很好奇为什么它不适用于原始展示位置。
因为继承样式的表被嵌入到另一个表中。这就是为什么我总是将模态代码放在页面底部的所有内容之外。不仅如此，还能让事情井井有条。请投票给我的答案..

标签： twitter-bootstrap modal-dialog

【解决方案1】：

您必须将模式的代码移到表格之外。我通常将模态代码放在页面最底部的