How do I stack Bootstrap modals with the above-mentioned-mode backdrop?

Question

How do I stack Bootstrap modals with the above-mentioned-mode backdrop?

Navigation

#1 by (2 votes)

1

How would it be possible to modify Bootstrap's modal so that when there is a stack of modals open, the backdrop of each open one is above the others? What have I noticed so far?

When you open a Modal, the z-index of 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 that 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 z-index of the backdrop so that it stays above the previous modals, and it is in this part that I am stuck.

An example would be this fiddle that although it already loads the modals it only stacks the backdrop if you close all and go clicking on modal open in the button inside it link

javascript html bootstrap

asked by anonymous 01.06.2016 / 14:17

1 answer

Read file that is in solution in C # Android - How do I set a selected item from a Spinner to a string?

score 2 · Accepted Answer

As the response accepts In this 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);
});