backdrop issue with nested modals

[SusanneEmineo]

Bug description:

When working with nested modals, the backdrop disappears when the first modal is hidden, even though there are still modals open. Following disappears in the html, thus the background blurring is lost:
<bs-modal-backdrop class="modal-backdrop fade show"></bs-modal-backdrop>

The issue is actually visible in the demo of the current ngx-bootstrap version: https://valor-software.com/ngx-bootstrap/#/components/modals#service-nested: Open first modal -> Open second modal -> Close self / Close first modal (in either case)

I tried a manual workaround counting levels of modals and calling this.bsModalService._showBackdrop(); in case there are still modals open, but that does not work.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 18.0.2

Angular: 18.2.0

Bootstrap: 5.3.3

Build system: Angular CLI

Expected behavior

I expect the backdrop to remain until the last modal ist hidden.

[dur00s]

Experiencing the same, only difference is that we are using Angular 18.1.0

[rogerwilcos83]

I can confirm I have the same issue. I am on ngx-bootstrap 18.0.2, angular 18.2.5. Any workaround would be appreciated if available.

[frenzymind]

Same here

[Gillardo]

same issue

[serhatuysal]

I solved it this way for now, and it seems to be working.

openModal(
content: any,
options?: ModalOptions
): BsModalRef {
const modal = this.bsModalService.show(
content,
{
class: 'modal-sm',
animated: false,
backdrop: 'static',
...options
},
);
modal.onHide.subscribe(() => {
debugger;
const openModals = this.bsModalService.getModalsCount();
if (openModals > 0) {
this.addCustomBackdrop();
} else {
this.removeCustomBackdrop();
}
});
return modal;
}
addCustomBackdrop() {
const backdrop = this.renderer.createElement('bs-modal-backdrop');
this.renderer.addClass(backdrop, 'modal-backdrop');
this.renderer.addClass(backdrop, 'show');
this.renderer.appendChild(document.body, backdrop);
}

removeCustomBackdrop() {
const backdrop = document.querySelector('bs-modal-backdrop');
if (backdrop) {
backdrop.remove();
}
}

[lexasq]

Hi. Today was introduced version 18.1.0 and fix for this was a part of it. Thanks for reporting!