How to stack Bootstrap modals with the backdrop above the previous modal?

Question

How would it be possible to modify the Bootstrap modal so that when there is a stack of open modals, the backdrop of each one is above the others? what I’ve observed so far?

when opening a Modal, the z-index the modal is 1050, and the backdrop is 1040, and it will always be 1040 regardless of how many modals are open... so I thought to get around this, it would have to be possible to use the event "show.bs.modal" and when opening the modals, it increment the backdrop z-index to stay above the previous modals, and this is where I’m stuck.

an example would be this fiddle that although already load the modals it only stacks the backdrop if you close all and go clicking on open modal in the button inside it http://jsfiddle.net/CxdUQ/314/

Answer 1

As the answer accepted In that question you can use the following code:

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
});