Bootstrap: Modal backdrop displays over modal in fixed container

[Cronkan]

Having a "main-container" with

.app-container {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     overflow-y: auto;
 }

Makes the backdrop position above the modal, blocking everthing.

Plunker: https://plnkr.co/edit/8JvG9eje5FDssHykPwW8?p=preview
(With angular where modal.html and modal.ts has code for autoopening modal and app.ts and app.scss has template for main window)

Edit Seems like using .appendTo('body') when opening modal is a workaround, i.e $('#exampleModal').appendTo('body').modal('show');

[solaomosola]

This also happens in ReactJs, once the modal window and backdrop are visible, and you navigate off the current page using the back button, the modal window disappears but the backdrop stays, thereby blocking access to everything else.

[ysds]

This issue has marked as a won't/can't fix issue and a duplicate of #22801, #20433 or #3217.

Also in docs:

Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.

Another workaround is add z-index: 1050 to your .app-container.

[ysds]

And related #25206. I believe #16432 will be reopen.

[solaomosola]

@ysds , tried it, but still did not work as desired. Was able to remove the backdrop using (".modal-backdrop").remove() in ("body").click(). But this is not an optimal solution since clicking on the body anytime would attempt to remove .modal-backdrop; (".modal-backdrop").click() did not generate an event , any suggestions on generating an on.click event from clicking the backdrop?.

[ysds]

Yes, the workaround in my previous comment will fix:

Makes the backdrop position above the modal, blocking everthing.

but your issue will not be fixed:

and you navigate off the current page using the back button, the modal window disappears but the backdrop stays,

[steve3d]

well, I'm pretty sure, even if all the parent of the div.modal has position: static, this will happen very often.

just studied more, some other non-overlapping element is still set toposition:fixed, so still causing problems. it seems the only absolute way to prevent this problem is to add the modal element under body.

[MartijnCuppens]

@ysds summarizes this nicely in his comment: https://github.com/twbs/bootstrap/issues/23916#issuecomment-364618947

Closing this.

[devt3000]

Hey, i just realized i was getting this issue because i had another package installed (https://www.npmjs.com/package/bulma) that was overriding bootstrap styling.

[VelkanGk]

Edit Seems like using .appendTo('body') when opening modal is a workaround, i.e $('#exampleModal').appendTo('body').modal('show');

Was the best solution so far. The button that triggers the modal must be changed to a click action with a function containing the lines above.

[joshmoto]

<script>
     $('#exampleModal').appendTo('body');
</script>

I added this directly after my modal, and the modal html was being loaded in via ajax, so as soon as my ajax html loaded, all my modals stacked nicely before the closing tag of the modal.