Ngx-bootstrap: Nested modals backdrop behind shows up behind the back-most modal.

[BBaysinger]

I'm popping open a secondary (child) modal that is the confirmation for an option in the primary (parent) modal. The backdrop looks like it gets added on the root level of the DOM somewhere, as it displays under the primary (back-most) modal. It otherwise works perfectly. I've searched the documentation, and I'm not seeing anywhere that explains how to manually place the backdrops, or how to affect z-index. I've posted a question about it here: http://stackoverflow.com/questions/42308444/stacked-nested-multiple-modals-in-ng2-bootstrap

[valorkin]

http://valor-software.com/ngx-bootstrap/#/modals#service-nested
please use modal service from ngxbs v1.8
and you will not have such issues

[bharatn]

I am still seeing this issue i.e when a second child modal is added, backdrop component z-index is not changed or 2nd backdrop is not added. So the end result is you can see parent modal in clear.

You can also see this in your example http://valor-software.com/ngx-bootstrap/#/modals#service-nested. Just make the parent modal bigger than the child.

Think the root cause of this is the line below
BsModalService.prototype._showBackdrop = function () {
if (this.modalsCount === 1) { <<

Why dont we add multiple backdrops - one for each modal with right z-index?

Im using 3.0.1

[Mathachew]

I am using a shared component that uses the modal service to create modals throughout my project and have several instances where a second modal will appear. Only one backdrop is created and the second modal appears on top of the first, which doesn't look good. Your very own examples show how the modals overlap each other instead of having separate backdrops with tweaked z-index values. This ng-bootstrap example is really what makes the most sense in how stacked modals should work.

[umahesh98]

I am still seeing this issue i.e when a second child modal is added, backdrop component z-index is not changed or 2nd backdrop is not added. So the end result is you can see parent modal in clear.

You can also see this in your example http://valor-software.com/ngx-bootstrap/#/modals#service-nested. Just make the parent modal bigger than the child.

Think the root cause of this is the line below
BsModalService.prototype._showBackdrop = function () {
if (this.modalsCount === 1) { <<

Why dont we add multiple backdrops - one for each modal with right z-index?

Im using 3.0.1

i am also facing the issue

[umahesh98]

This issue got resolved by adding another above the modal and fixed the issue

[BjornFridal]

In v. 5.1.1 only one backdrop was added to the DOM even though two modals were open (nested modals). We needed a quick solution. I solved our problem using the CSS siblings selector - if we have two modals open at the same time, give one of them a darker background color.

.modal + .modal {
  background: rgba(0, 0, 0, 0.6);
}