I have a modal within a modal, and it mostly works, except for one thing. The backdrop hangs behind the modal that is already open. I checked the documentation, and I'm not sure how to specify exactly where the backdrop should go. The API shows ModalBackdropComponent, with a selector of bs-modal-backdrop, but I'm not sure if there is something I can do with this to solve my issue. I'm not sure if this is a z-index issue, or if the backdrop needs to be placed somewhere specific.
I ran into this exact problem today. I couldn't find any way to resolve it by explicitly defining my own instance of the bs-modal-backdrop component. The way I resolved it was to set [config]="{ backdrop: false }" on the bsModal element of the child modal (disable the default backdrop), then I added a new element like this:
<div class="modal-backdrop fade in" (click)="modal.hide()"></div>
As the first element inside the child modal bsModal element. This assumes you've defined the modal property as #modal="bs-modal" or similar. Alternatively you could call a method on your component with the click handler.
You'll also need to set a z-index on the .modal-dialog element (which should be a sibling of the new .modal-backgrop element) of 1050 or greater.