React-bootstrap: Multiple modal, backdrop z-index

[Vivekbhusal]

The z-index of all backdrop is same (1040), where, it should be above the first or previous modal.

Reproducible example:
https://jsfiddle.net/yrd03t24/

Also, is there a way to add class to backdrop div?

I am happy to contribute. Is there any plan to improve on this?

[jquense]

bootstrap modals are not "stackable" by design and we don't plan on adding it here. If you need that behavior try react-bootstrap-modal

[ammmze]

I realize this is an old thread, but I was looking for this ability and this was the first thread on the issue. I did find some styles we could apply to make them stackable though...

I had to bump the react-bootstrap version a little bit. I left the react version as-is.
https://jsfiddle.net/v8fmfmjk/4/

So the styles are:

div[data-reactroot][role="dialog"],
div[data-reactid][role="dialog"]:not(.modal) {
    position: relative;
    z-index: 1;
    height: 0;
    overflow: visible;
}

Though in my own scenario using a newer version of react, react-bootstrap, and bootstrap, all I needed was:

div[data-reactroot][role="dialog"] {
    position: relative;
    z-index: 1;
}

Though with this method, the backdrop would get darker with each modal you open since the semi-transparent backdrops are still peering through to the next layer.

[long-zhen]

@ammmze 's solution is great. However in recent react versions >16.3, you will want to use below instead.

body > div[role="dialog"],
body > div[role="dialog"]:not(.modal) {
    position: relative;
    z-index: 1;
    height: 0;
    overflow: visible;
}