Ngx-bootstrap: Modal within flexbox structure

[sky-coding]

I am using the modal component within an application structured using flexbox. It seems that when a parent of the modal is using display:flex or position:relative that modal itself (which has z-index:1050) is taking the parent's z-index. This z-index is going to be lower than the backdrop's z-index:1040, so the modal is placed behind the backdrop and inaccessible. This doesn't happen when the parent is display:block and position:static, regardless of z-index.

I have a contrived example here to demonstrate the problem:
http://plnkr.co/edit/dwql7Dq1GjOEejOFBNhJ

Another third-party modal component renders the entire modal content at the same level as the backdrop, eliminating this problem. I'd like to stick with ng2-bootstrap but I'm not sure if there is an easy way to fix this problem without coding all of my modals at the app level. Feedback much appreciated, thanks!

[ghost]

Here's a working plunker:
http://plnkr.co/edit/dwql7Dq1GjOEejOFBNhJ

[sky-coding]

@ericmlee thank you! Looks my my plunker was trying to import ng2-bootstrap through systemjs instead of using a script tag.

@valorkin could you take a look at the working plunker and determine if this is expected behavior or an [issue]? The problem is present in Chrome and Firefox, but works fine in IE11 and Edge.

[jaurakunal]

@ericmlee - Maybe I'm missing something, but i tried running the plunkr code and it still seems to put the modal box behind the backdrop.

[sky-coding]

@jaurakunal my original plunker demonstrated the problem but was improperly loading scripts, @ericmlee fixed the plunker and it now properly demonstrates the problem we are facing. Thanks!

[jaurakunal]

@sky-coding Thanks for clarifying that for me. :-)

[LanderBeeuwsaert]

I seem to have the same issue.
Is there a solution for this?

[sherlock1982]

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's z-index (1040 in case of a bootstrap 3.x). 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:

Create a modal in the same context as backdrop so z-index will work. Somewhere outside app header component.
OR Raise parent component z-index so it will be higher than backdrop's but lower than modal.

It's fully described here

[valorkin]

Thanks for link! Because css is not my strong point :)

[sherlock1982]

This issue appeared when we moved the same theme from Angular1 to Angular2 now using ng2-bootstrap. Seems that uibModal which we were using always created modals in the root element.

I noticed the issue when I tried to open a modal from a header while opening from other places was ok.

Finally I acquire ViewContainerRef of the root element and dynamically place modals there.

[valorkin]

v1.8 modal service adds modal to body
so should be fine now,
please try