Can't get ng2-bootstrap modal to show up on top of the bs-modal-backdrop

Question

I've got an issue using ng2-bootstrap's modals. I'm doing the whole viewContainerRef hack mentioned here. I'm making a modal in a deeply nested component (4 levels deep through routing). I copied the modal code from the above link. Whenever I try to open it, it opens like this: The bs-modal-backdrop is totally covering the screen, including the modal, preventing me from interacting with it. Any idea why this is happening?

Answer 1

It's a specific situation with a z-index. At least one of the parent components created a stacking context with a z-index less than backdrop z-index 1040. And now all HTML elements will be stacked in it's context.

That's why a backdrop overlaps a modal no matter what z-index a modal has.

To solve the issue:

1. Create a modal in the same context as backdrop so z-index will work. Somewhere outside app header component.

2. Raise parent component z-index so it will be higher than backdrop's 1040.

It's fully described here