title: Bootstrap Modal Footer Not Displaying Correctly
body: <p>I'm using a Bootstrap Modal and the modal-footer div is displayed with the grey background used to block out the main page instead of the white background used by the rest of the modal.</p>
  
  <p>It's a somewhat complicated set up but I'll do my best to explain it.</p>
  
  <p>The modal definition looks like this:</p>
  
  <pre><code>&lt;div class="modal fade" role="dialog" tabindex="-1" id="concert-modal"&gt;
  &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;
              &lt;h4 id="concert-modal-title" class="modal-title"&gt;&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="concert-modal-body" class="modal-body"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="modal-footer"&gt;
          &lt;span id="ConcertMessage" class="pull-left"&gt;&lt;/span&gt;
          &lt;button class="btn btn-default" type="button" data-dismiss="modal"&gt;Cancel &lt;/button&gt;
          &lt;button class="btn btn-primary" type="submit" form="concert-modal-form"&gt;Save &lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>You'll see that the modal-body section is empty.  That's because I have javascript that uses the Mustache.js templating system to set the html of the body using a template and the return from an Ajax call.  That all works correctly and the modal body is displayed correctly.</p>
  
  <p>The modal body consist of a Bootstrap tab control and a form that contains all the tab panes, so the overall structure looks like this.</p>
  
  <pre><code>&lt;ul class="nav nav-tabs nav-justified nav-justify"&gt;
      &lt;li class="active"&gt;&lt;a href="#tab-1" role="tab" data-toggle="tab"&gt;Basic &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab-2" role="tab" data-toggle="tab"&gt;Media &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab-3" role="tab" data-toggle="tab"&gt;Tickets &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;form id="concert-form" action="#" class="form-horizontal"&gt;
      &lt;div class="hidden"&gt;
          &lt;input type="text" name="Mode" id="Mode"&gt;
          &lt;input type="text" name="ConcertID" value="{{ConcertID}}"&gt;
      &lt;/div&gt;
      &lt;div class="tab-content" style="margin-top:20px;"&gt;
  ... form-group divs with labels and input controls...
  &lt;/div&gt;
  &lt;div class="tab-content" style="margin-top:20px;"&gt;
  ... form-group divs with labels and input controls...
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I've used an html syntax checker to make sure I don't have any unclosed tags.  I've also tried placing the form tag in several different places in the code but no matter what I do, the modal-footer section does not display correctly.</p>
  
  <p>Any ideas?</p>