How to Handle Two Overlapping Twitter Bootstrap Modals

Question

I have a standard Twitter Bootstrap modal on my page:

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Comments</h3>
  </div>
  <div class="modal-body">
    <p>Please provide a comment:</p>
    <textarea id="comment"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-primary">Save comment</a>
  </div>
</div>

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):

<div id="error-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Error</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
    </div>
</div>

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.

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.

Or are there any good plugins that deal with multiple Twitter Bootstrap modals?

Answer 1

It might be worth checking out this Bootstrap Modal plugin.

In the demo here...
http://jschr.github.io/bootstrap-modal/

...one of the examples has "Stackable" modals, and as far as I can tell, you are not able to interact with the old modal behind the new modal; i.e., you first have to click the background of the new modal to make the new modal go away and gain access to the old modal. (Note the example does give different ids to each modal.)

As an aside, I considered using this plugin at one point, but I think in part this article provided an argument for not using modals for inline editing: http://www.keepitslickstupid.com/ (from web.archive.org) (see section 3, "Modal dialogs are so 2002")