title: How to Handle Two Overlapping Twitter Bootstrap Modals
body: <p>I have a standard Twitter Bootstrap modal on my page:</p>
  
  <pre><code>&lt;div class="modal hide fade"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
      &lt;h3&gt;Comments&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;Please provide a comment:&lt;/p&gt;
      &lt;textarea id="comment"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;a href="#" class="btn btn-primary"&gt;Save comment&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, I am saving the comment via AJAX and close the modal when a successful save happens.  However, I have a global AJAX error handler, which itself opens a modal when any AJAX calls encounter an error (not just for the comments AJAX call):</p>
  
  <pre><code>&lt;div id="error-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;h3&gt;Error&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The modal-body is filled in by the error handler and, by default, the new modal is placed on top of the existing modal. However, the modal backdrop for the new modal is behind the original modal, which still allows for interaction with it.</p>
  
  <p>Is there a way to give the error modal backdrop a different z-index? Right now, the modal backdrop is modal agnostic and doesn't have a modal specific id/class.</p>
  
  <p>Or are there any good plugins that deal with multiple Twitter Bootstrap modals? </p>