twitter-bootstrap - Bootstrap 模态正文内容不隐藏

这个模态完美地工作:

<!-- 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 -->

最佳答案

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

见工作 fiddle :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">$800</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">&times;</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">&times;</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>

关于twitter-bootstrap - Bootstrap 模态正文内容不隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21240776/

twitter-bootstrap - Bootstrap 模态正文内容不隐藏

上一篇：iis-7 - IIS7 可以安装在 XP 上吗？

下一篇：ruby-on-rails-3.2 - 如何使用 simple_fields_for 创建多个相同嵌套类型的对象