Multiple Bootstrap Modals opens onLoad but class modal-backdrop transparency layer is not overlapping on each of the modal

Question

I am trying to achieve Multiple Bootstrap Modals opens onLoad currently it opens perfectly fine onClick even on each of the modal button however we have some TIMEOUT WARNING, which comes on load so for that we need modal works onLoad as well

During the investigation found that class modal-backdrop transparency layer is not overlapping means based on the modals z-index is not increases, and requirement from my client is that If user launch modal onClick or onLoad the user may see multiple bootstrap modals depending upon the scenario, example: If user click on "Cancel" button user will be promote in modal say "Hey, Are you sure you want to cancel" but at the same time might get modal onLoad addressed "TimeOut Warning" from server

Below are the screenshot for onLoad and onClick behavior scenarios

This is the behavior onLoad transparency layer are not coming on each of the below modals but onClick multiple modals works perfectly fine:

Here I also Atrached jsFiddle: http://jsfiddle.net/CxdUQ/314

Hi @Leandro Ruel, but we have integrated with bs3, any solution in that? — Rahul Joshi, May 27 '16 at 12:15
how about loop every ".modal-backdrop" and adding more z-index, like 1050 + 1, and +2 to the next... so i think it will work. — Joe RR, May 30 '16 at 14:46
get the z-index of modal, and apply to the modal-backdrop: http://stackoverflow.com/questions/1388007/getting-the-z-index-of-a-div-in-javascript — Joe RR, May 30 '16 at 14:49
Hello,If you notice in Fiddle - (http://jsfiddle.net/CxdUQ/314/) I am doing the same thing in my code var zIndex = 1040 + (10 * $('.modal:visible').length), but that works onClick but not onLoad, any other suggestion, would be really appreciated, Thanks. — Rahul Joshi, May 31 '16 at 06:15

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

i found this question that already have a answer for this, and here is your jsfiddle with the changes: http://jsfiddle.net/CxdUQ/

the following code is the answer found at link provided above:

$(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);
});

edited May 23 '17 at 12:08

Community

1
1

answered Jun 01 '16 at 14:42

Joe RR

262
3
22

It works button onClick but how do we achieve onLoad method for multiple modals that is what i am looking for, Any solution for this? – Rahul Joshi Jun 02 '16 at 05:40

Multiple Bootstrap Modals opens onLoad but class modal-backdrop transparency layer is not overlapping on each of the modal

1 Answers1