Ngx-bootstrap: Nested modals backdrop Issue

[nareshkore]

Hi,
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 (Some time third model too).

Only one backdrop is created and the second modal appears on top of the first, which doesn't look good.
Even in the given examples , the modals overlap each other instead of having separate backdrops with tweaked z-index values.

This ng-bootstrap example is really what we need.

We need above functionality in case of modals opening from modal service.

[nareshkore]

Hi Team,
Can you please let us know, when can we expect this enhancement.

[bhaskerchari]

Hi @Domainv ,

I am also looking for this feature very eagerly and something very urgent.

I am just wondering how come multiple backdrops are supported in case of templates using directives but not with the modal service? It should work both ways since that feature is supported and working in
one case and not working in other doesn't make any sense.

Are we missing adding any configurable parameter which will enable it to open multiple backdrops even in case we use modalService or it is something which isn't currently supported?

Thanks,
Bhasker

[bhaskerchari]

Any update on this feature or at least a tentative date on when this can make up for release?

Thanks,
Bhasker

[arthurfrancioni]

Any update?

[nigelsim]

I think that you can probably achieve the desired outcome through CSS by virtue of the way the modals are being displayed.

If you add a style like:

.modal-open .modal {
    background: #00000077;
}

This will make the div that the modal is displayed in have the opaque background.

You'll probably also want to disable the main backdrop through the modal config to prevent double-ups. In fact, this is the element that handles the background click detection, so the actual ModalContainerComponent seems redundant?!?

I've not tested this in many situations, but it does appear to work correctly, both for modals created using the Modal Service and those created with the Modal Directive.

[nigelsim]

It does however appear that mixing ModalService and ModalDirective modals causes issues, such as, if you have them as nested modals the inner one (ModalService) will clear the .modal-open class from the body when it closes, causing the background to disappear.

To get around this I'm currently using

.modal {
    background-color: #595974;
    opacity: 0.7;
}

[MaksymByelous]

Hello,
I have problem with two nested modals. when inner is closed body loose class 'modal-open' and first modal loose some styles because of that. In my case, if first modal is big and you need scrooll for body to check all of it, you loose scrooll in this case.
We need some check if other modal is opened dont remove 'modal-open' class in body

[khaukheng]

Hello,
I have problem with two nested modals. when inner is closed body loose class 'modal-open' and first modal loose some styles because of that. In my case, if first modal is big and you need scrooll for body to check all of it, you loose scrooll in this case.
We need some check if other modal is opened dont remove 'modal-open' class in body

I am having exactly the same issue, anyway to get around with this issue?