Modal backdrop displays over modal in fixed container

Having a “main-container” with

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

<div class="app-container">
  <div class="modal">
....
   </div>
</div>

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');

[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.

[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.