Modal body content not hiding

[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">&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 -->

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 -->
<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">
               <tr>
                  <thead>
                     <th>Header1</th>
                     <th>Header2</th>
                     <th>Header3</th>
                  </thead>
               </tr>
               <tr>
                  <td>data1</td>
                  <td>data2</td>
                  <td>data3</td>
               </tr>
            </table>
          </div>
       </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

[juthilo]

You're using incorrect HTML for the <table>. All trs need to be children of a thead, tfoot or tbody and those three can only ever be direct children of the table.

[TimNguyenBSM]

Wow. Thanks. Corrected the HTML for TABLE but the data is still showing.

[juthilo]

Sorry, I think I misread what you were trying to achieve. Could you explain again/in more detail what the desired output is here?

[cvrebert]

@TimNguyenBSM Could you also make your example into a JS Fiddle or JS Bin?

[TimNguyenBSM]

@cvrebert Here you go: http://jsfiddle.net/mty3g/14/

[TimNguyenBSM]

@juthilo The issue is that the TABLE contents are not hidden as I would expect them to be. Additionally, when opening the MODAL, I would expect the TABLE contents to show, but they do not. Please see: http://jsfiddle.net/mty3g/14/

[TimNguyenBSM]

I figured how to get it work. It was the placement of the Modal. Once I moved it, it works fine now. Still curious why it didnt work with the original placement though.

[cvrebert]

Yeah, you can't just jam a div.modal in any arbitrary place. It should generally be relatively top-level in the markup.
Leaving this open as a docs bug, since we ought to mention that gotcha.

[TimNguyenBSM]

Cool. In case this helps... I had two MODAL's in the same TR which created the issue, but once there was only one per TR it was all good.