I'd like to request the ability to stack modals. Right now there are two main things that making Modal stacking difficult:

1. The Modal backdrop get's added every time you open a new Modal. This means that once the second modal get's added, the site is basically completely hidden because the stacked modal backdrops are so dark.
2. Once a second (or third or fourth) Modal is added, the modal beneath it is still visible, and can still be clicked on. This can cause any number of problems.

First Modal, everything is fine: http://twitpic.com/show/full/8wdshj.png

Second Modal, we get a double backdrop and can barely see the site below it. The first modal is still clickable. http://twitpic.com/show/full/8wdszp.png

Third Modal, we now have a triple backdrop and the site can't be seen at all. The first and second modals are still clickable. http://twitpic.com/show/full/8wdt3s.png

I've managed to fix problem 1 as described above in my own code. In bootstrap-modal.js I've changed code in: function backdrop. My fix still adds the backdrop, but applies a class to it to make it transparent. This way it is still clickable, but just doesn't muck up the visuals.

Original Code

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
  .appendTo(document.body)

if (this.options.backdrop != 'static') {
  this.$backdrop.click($.proxy(this.hide, this))
}

Updated Code

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
  .appendTo(document.body)

if ($("body div.modal-backdrop").length > 0) {
  this.$backdrop.addClass("modal-backdrop-transparent")
}

if (this.options.backdrop != 'static') {
  this.$backdrop.click($.proxy(this.hide, this))
}

I've also added the css below to the modals.less file:

.modal-backdrop-transparent
{
  background-color: transparent;
}

I haven't had time to try to fix the stacking issue though. I have given it some thought, but not tried anything out yet. I was thinking that every time a Modal is opened, we could keep track of the open Modal count using the body tag and a data attribute. And when a Modal is opened, we could check the value of that data attribute and then do a "sendToBack" (probably just add a css class with a lower z-index than the modal backdrop) on any previously opened Modals. Then when a Modal is closed, we could again check the values and do a "sendToFront" for any modals that were a level lower than the Modal we are closing.

I don't know if I'm the only person that has run into stacking issues with Modals, but I think this would be a great addition to the framework. Please let me know if you have any questions or what you think about the way I've implemented a fix for the backgdrop stacking, or my idea of how to fix the Modal stacking. I haven't had much time to try to fix the Modal stacking, but if my idea get's the blessing here, I'll find some time to work on it and try to get it in for the next release.

Thanks.