Css 引导模式弹出窗口使屏幕变暗，但很少有部分屏幕仍在同一级别上显示，并且不会变暗

在angular 7项目中，我使用的是引导模型。当我打开模型时，它只会变暗位置：相对组件。少数组件具有位置：固定（请参见屏幕截图）。所有其他组件的z指数：<2；虽然当O打开模型弹出窗口时，它并没有变暗

 <div class="modal fade" *ngIf="deleteDialogOpened" id="deleteModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered"  role="document">
        <div class="modal-content">
          <div class="modal-header " >
            <h5 class="modal-title">Confirmation</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p style="margin-top: 20px; margin-bottom: 20px; text-align: left;">Are you sure you want to delete {{this.currentUser.firstName}}?</p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" data-dismiss="modal" (click)="close('cancelDeleteDialog')">Cancel</button>
            <button class="submit-btn btn btn-elevate kt-login__btn-primary" data-dismiss="modal" (click)="close('delete')">Delete</button>
          </div>
        </div>
      </div>
    </div>

确认书
&时代；
是否确实要删除{{{this.currentUser.firstName}}

取消
删除

尝试将模态放在具有容器类的div中，如下所示：

<div class="container">

<div class="modal fade" *ngIf="deleteDialogOpened" id="deleteModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered"  role="document">
        <div class="modal-content">
          <div class="modal-header " >
            <h5 class="modal-title">Confirmation</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p style="margin-top: 20px; margin-bottom: 20px; text-align: left;">Are you sure you want to delete {{this.currentUser.firstName}}?</p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" data-dismiss="modal" (click)="close('cancelDeleteDialog')">Cancel</button>
            <button class="submit-btn btn btn-elevate kt-login__btn-primary" data-dismiss="modal" (click)="close('delete')">Delete</button>
          </div>
        </div>
      </div>
    </div>

</div>

确认书
&时代；
是否确实要删除{{{this.currentUser.firstName}}

取消
删除