title: Bootstrap modals overlap
body: <p>I have a page that simplified, looks like this :</p>
  
  <pre><code>&lt;html&gt;
  &lt;form&gt;
  //form contents here
  //modal 1 here
  &lt;div class="modal fade" id="addTime" tabindex="-1" role="dialog" aria-labelledby="addTimeLabel"&gt;
  &lt;div class="modal-content"&gt;
  &lt;div class="modal-header"&gt;
  &lt;div class="modal-body"&gt;
  &lt;div class="modal-footer"&gt;
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/form&gt;
  // insert duplicate modals here (2 of them)
  &lt;/html&gt;
  </code></pre>
  
  <p>The modal within the form works perfect, but when I click on buttons to call up modals 2 and 3, they appear within the 1st modals window?  How can I fix this?</p>
  
  <p>Edit : If I delete the 1st modal entirely, 2 and 3 work perfect.... but I need the 1st modal too!</p>