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?

So, I did that, and the modal's Z index is... 1050 where the backdrops is 1040 — Alex Kibler, Sep 20 '16 at 15:05
That's strange. Have u checked position property of the modal - http://stackoverflow.com/questions/9191803/why-does-z-index-not-work — Gopinath Shiva, Sep 20 '16 at 15:09
The same happened to me. Have you found a solution? I noticed it happens when I launch it from a nav bar of my app. — norekhov, Feb 09 '17 at 18:25
No idea, sorry... I don't even work for that same company anymore so I can't reference the code to figure out what I did — Alex Kibler, Feb 09 '17 at 18:25

score 2 · Answer 1 · answered Feb 09 '17 at 21:09

2

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:

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

It's fully described here

answered Feb 09 '17 at 21:09

norekhov

3,915
25
45

Not sure whether (2) raising parent components z-index will help. I suppose then the backdrop won't be visible and/or won't catch click events outside the modal dialog. – hgoebl Apr 22 '17 at 11:08
Why not? I remember at least it's visible. Though I won't recommend spoiling bootstrap theme that much. As I understand header stacking context has it's own z-index relative to parent context and if it's bigger than a backdrop than it's perfectly ok. Please note I'm speaking about header z-index, not modal z-index. – norekhov Apr 22 '17 at 15:01

score 0 · Answer 2 · edited Apr 10 '18 at 19:03

This works for me though it's not optimal:

Implement onShow() and onHide() events like this for modal code:

<div class="modal fade"
     bsModal #uploadModal="bs-modal"
     [config]="{backdrop:'static'}"
     tabindex="-1"
     (onShow)="handler('onShow', $event)"
     (onHide)="handler('onHide', $event)"
     role="dialog"
     aria-hidden="true">

Then define handler like so:

private handler(type: string, event: any) {

    if (this.containerId) {

      let elem:Element = document.getElementById(this.containerId);

      if (!elem)
        return;

      switch (type) {

        case 'onShow':
          elem.classList.add('modal-front');
          break;
        case 'onHide':
          elem.classList.remove('modal-front');
          break;
      }

    }
  }

Pass in containerId via some mechanism such as openModal(). Finally, add globally scoped class modal-front that just sets a high z-index.

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

2 Answers2