Ngx-bootstrap: Modal appearing backdrop non editable.

[sridharan31]

i using one component in other component However, my modal is appearing underneath the grey fade (backdrop) and is non editable.

    <button class="btn btn-success" (click)="lgModal.show()">Large modal</button>
    <!-- Large modal -->
    <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" (click)="lgModal.hide()" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Large modal</h4>
          </div>
          <div class="modal-body">
           suscipit lobortis nisl ut aliquip ex ea commodo consequat.
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary confirm-btn" (click)="lgModal.hide()">Save changes</button>
          </div>
        </div>
      </div>
    </div>

@Component({
  selector: 'ba-page-top',
  styles: [require('./baPageTop.scss')],
  template: require('./baPageTop.html'),
  encapsulation: ViewEncapsulation.None
})

Othercomponent.html

<ba-page-top></ba-page-top>

[valorkin]

ng2 bootstrap version?

[sridharan31]

"ng2-bootstrap": "1.1.16",

[valorkin]

Check changelog for migration notes and install 1.1.16-11

[sridharan31]

updated version still problem not resolved? any other solution

[pgeyman]

I just had this issue and tracked it down to a parent element of the modal having position: relative and a z-index lower than the backdrop. (There was a bootstrap issue about it raised a while ago)
I fixed it by removing the z-index on the parent element.

[zsfarkas]

We are experiencing the same issue with the latest Firefox (50.1) under Linux (maybe OS is not relevant). Raising the z-index have not helped us.

It seems to be an issue, if one of your elements is within an element with relative css position. We could not find any workarounds for this until now.

Although we don't have this problem under Windows with an earlier version of Firefox.

[valorkin]

@Betrozov you was facing this styling issue too
can you help guys with it?

[jdeblander]

I guess I have the same issue. The z-index of the modal div is way higher then the z-index of the backdrop overlay. Still if I open the modal, the modal is behind the backdrop. Is there any solution for this problem?

Once I lower the z-index of the backdrop, the modal comes to the front whenever the z-index of its parent is higher then the one of the backdrop.

[zsfarkas]

On which OS and with which browser do you have this problem?

The only workaround I found, is turning off the backdrop.

I think this has to be fixed in ng2-bootstrap.

[jdeblander]

Im on Win10 using Chrome v56. Tested it in Edge aswell and had the same issue.

How can I disable the backdrop?

[Bulan]

@Tommytoe
You can disable the backdrop with the ModalOptions
http://valor-software.com/ng2-bootstrap/#/modals#modal-options

I.e
[config]="{backdrop: false}"
like:
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: false}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

[jdeblander]

My problem is fixed.
It seemed that the modal conflcted with a styling of another component in my page.
i used this sidebar: https://github.com/arkon/ng-sidebar
Wich had a styling display: block. When I changed block to inline, the modal was displayed correctly, above the backdrop.

[devongermano]

Having the same problem here.
Modal does not have any parent containers with relative positioning properties, and is a has a much greater z-index than the backdrop. Strangely, removing the z-index property from the backdrop causes the z-index of the much higher title-bars to overlay the backdrop, and the modal to show through, even though the modal is not a child of the title-bars.

[sridharan31]

@devongermano remove Fade In

[zsfarkas]

@sridharan31: Thank you for the Idea, but I think the classes like 'fade' and 'in' come from the ng2 components / directives. How could you then remove them?

Anyway, if you remove 'fade', then you don't have animation. It would not be nice, either.

[hgoebl]

Before tweaking z-index to horrible high values, one have to really understand "stacking context".
Here is a very good explanation: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
This problem is not a trivial one, believe me. The most robust solution would be to "teleport" the DOM content of the modal to <body> level as a neighbor of the inserted <bs-modal-backdrop> element with a higher z-index (e.g. 1050 while backdrop has 1040).
In times of AngularJS 1.x this usually wasn't possible because of $scope chaining. I'm not sure how complicated this would be with Angular (2+).

[AmlaPeter]

In case it helps: I experienced this issue when an ancestor element had a transform style ( left behind after an angular animation ) -

e.g. style="transform: translateX(0px);"

I was able to remove this style and fix my issue.

version: ng2-bootstrap: 1.6.2

I agree "teleporting" the modal to level would be more robust, does the container="body" option of the dropdown component not do something similar?

[mip1983]

I had similar code to the original post, and my modal was appearing behind the overlay. I've put a work around that moves the modal element in the dom (in my case, I have an input 'elementId' in my component, and I use that to give the modal div an id) :

ngAfterViewInit() {
document.body.appendChild(document.getElementById(this.elementId + '-image-modal'));
....

Maybe this library should have an option, or even default behaviour that does this so you don't have to worry about the css of the modals parent.

[bionets]

Yes @mip1983 's solution works for me. Thanks!

[valorkin]

@mip1983 I was thinking about it

[valorkin]

solved in v1.8
and it is better to use modal service now