title: Opening modal from within a modal, backdrop z-index
body: <p>I need to be able to open a modal within another modal (while the first modal stays open). Here's an example of that:</p>
  
  <p><a href="http://jsfiddle.net/k2coz893/2/" rel="noreferrer">http://jsfiddle.net/k2coz893/2/</a></p>
  
  <p>When you open the second modal, you'll notice that the backdrop/background of the second modal doesn't cover the first modal (i.e. the first modal can still clearly be seen when the second modal is open). This seems to be because the <code>z-index</code> of the second modal's backdrop is the same as the other and therefore the first modal is still visible.</p>
  
  <p>How can I prevent this? How can I have the second modal's backdrop cover the first modal?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
    Launch first modal
  &lt;/button&gt;
  
  &lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;
  
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog"&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;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;first&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"&gt;
    Launch second modal
  &lt;/button&gt;
  &lt;p&gt;
  Something
  &lt;/p&gt;&lt;p&gt;
  Something
  &lt;/p&gt;&lt;p&gt;
  Something
  &lt;/p&gt;&lt;p&gt;
  Something
  &lt;/p&gt;&lt;p&gt;
  Something
  &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
    &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  
  &lt;div class="modal fade" id="myModal2" tabindex="-1" role="dialog"&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;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;second&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
    &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>