Popups on your Popups

We've been using Bootstrap 3 for a lot of the newer screens in our application - particularly our internal, administrator facing screens.  It has been a great framework.  However, the Bootstrap Modals do leave a fair amount to be desired.  You have to write a lot of boilerplate code and then bootstrap has this in their documentation:

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.  

To avoid writing boilerplate, we've used the monkey-friendly Bootstrap Dialog javascript library from nakupanda.  This makes showing a Bootstrap Modal as simple as:

Okay, but what if you want to show a modal on top of another modal?  That is custom code!  Oh look, custom code:

Here is a JS Fiddle of the same thing showing it in action.


Some of that code comes from this Stack Overflow question and answer.

A few things are going on here:

1. When the modal starts to show, set the visibility to hidden.  Bootstrap animates the modal coming in from the top of the screen.  However, the second modal animates in behind the first.  So hide the modal until its completely shown.
2. To make the second modal come to the foreground, the z-indexes need to be adjusted.  If you dig into Bootstrap 3, you'll find the z-index of the dialog is 50000 and the background is 1030.  So the new modal and back drop need to be in front of those.
3. The timeout of 100 ms is probably not necessary, but in my application I am displaying an overlay spinner when the link is clicked.  The 100ms makes the overlay show for a minimum amount of time. 

Modals on top of modals are a kludge, and they aren't a great design choice, but when you need them, you need them.

Barf: I know we need the money, but...
Lone Starr: Listen! We're not just doing this for money!
Barf: [Barf looks at him, raises his ears]
Lone Starr: We're doing it for a SHIT LOAD of money!

Maybe in the future, Bootstrap will make multiple modals easier, but I think its justifiable that multiple modals requires custom code.