backdrop doesn't get darker in nested modal when called from BsModalService

[imtiazShakil]

Bug description: Backdrops should become darker when modal called from another modal (nested modal). This works perfectly when bsModal directive is used in html side. But this doesn't work when modals are created and called from BsModalService. Atleast I don't find such documentation in ngx-documentation page.

Plunker/StackBlitz that reproduces the issue: No need for this as this can be found in ngx-documentation page. :heavy_check_mark: Backdrop getting darker for this usecase: https://valor-software.com/ngx-bootstrap/#/modals#directive-nested :red_circle: Backdrop not getting darker here: https://valor-software.com/ngx-bootstrap/#/modals#service-nested

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 6.1.0 Angular: 9+ Bootstrap: 4.4

Expected behavior

1. Backdrop should be darker when nested modals are called from service.
2. Backdrop color should be configurable from BsModalServiceservice (eg. dark, darker, darkest)

[valorkin]

nested modals and html versions of modal has been developed in different times. as far as I remember we intentionally was not duplicating modal backdrops we wanted to mock bootstrap.js behaviour but they doesn't support nested modal, so we didn't had one opinion

as for me hard to say how it should be

[custompro12]

Hopefully we can agree that the current behavior leads to a less than ideal user experience. See below screenshot from the documentation website

[custompro12]

As a user, I would expect a new backdrop to be created for each nested modal at a higher z-index than the parent modal so that the new backdrop also covers "First modal". From a UX standpoint, I think you would want to draw attention to the top-most modal and away from the "covered" modals underneath.

[valorkin]

from UX perspective I would cover previous popup with backdrop TBH, but it didn't worked out well

[SergioComputerx]

Here I solved this problem with css

.modal.fade { background: rgba(0, 0, 0, 0.5); }

.modal-backdrop.fade { opacity: 0; }