<div class =“ modal-backdrop fade”> </div>占用整个窗口空间

Question

我的Angular应用程序的HTML有一个模式框，该框会在应用程序启动时弹出。

<div >
  <div class="css-grid-container" *ngIf="!loading">
    <app-nav-component></app-nav-component>
    <app-content-component></app-content-component>

    <app-footer-component></app-footer-component>
  </div>
  <app-progress-bar></app-progress-bar>

  <app-dialog-box #dialogBox [dialogMessage]="" [dialogID]="'appDialog'" [dialogContext]=""></app-dialog-box>
</div>

app-dialog-box是一个Angular组件，它使用JavaScript API modal('show')和modal('hide')显示/隐藏Bootstrap的模式。

<div #modal class="modal fade" tabindex="-1" role="dialog" id={{dialogID}}>
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">CodingJedi</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="dialogHide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{{dialogMessage}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="dialogHide()">Close</button>
      </div>
    </div>
  </div>
</div>

显示和隐藏模态的代码

 $(this.dialogRef.nativeElement).modal('show');

和

$(this.dialogRef.nativeElement).modal('hide');

我的问题是，Bootstrap似乎在html中添加了<div class="modal-backdrop fade"></div>，这占据了整个页面并使其他组件无法点击。请参见下面的图片。您会注意到div占据了整个空间，即使模态不可见，因为在模态上单击close之后，使用$(this.dialogRef.nativeElement).modal('hide');

隐藏了该模态

有趣的是，模式div位于app-dialog元素内，但是模式背景div不在同一级别！ （见图2） 我该怎么做才能解决我的问题？

更新

仍然无法找到答案，但是问题似乎与z-index值有关。模态框在app-root的app-dialog-box中创建

<app-root>
<div>
  <!-- the below div is a grid container - parent. All elements one element below this are its children.
  Elements under children are not grid children -->
  <div class="css-grid-container" *ngIf="!loading">
    <app-nav-component></app-nav-component><!-- grid child -->
    <!--this component has router-outlet to put new componnents in it -->
    <!-- the components which target this router-outlet could be containers-->
    <app-content-component></app-content-component><!-- grid child -->

    <app-footer-component></app-footer-component><!-- grid child -->

  <app-progress-bar></app-progress-bar><!-- not a grid child -->  <!--this is positioned using absolute positioning and thus will not affect positions of others -->
  <app-dialog-box #dialogBox [dialogMessage]="" [dialogID]="'appDialog'" [dialogContext]=""></app-dialog-box>
  </div>
</div>
<app-root>

但是Bootstrap将<div class="modal-backdrop fade show"></div>添加到与app-root相同的级别，而不是添加到app-root内。由于app-root的z索引比<div class="modal-backdrop fade show"></div>的z索引低，因此背景始终位于最上方。如Bootstrap Modal sitting behind backdrop

中所述

” 尽管.modal的z-index高于.modal-backdrop的z-index，但是如果.modal位于父div中，则z-index不会优先，而.modal-backdrop的z-index将更高。这是因为，如果父级的z-index值比.modal-dropdrop小，则不管给子级的z-index值如何，其所有内容都将位于模式后面。“

Answer 1

问题完全不同！我添加了在modal中显示ngAfterViewChecked的逻辑。 Angular会重复调用此函数（请参见Angular中的生命周期挂钩）。似乎由于重复执行此功能，Bootstrap添加了多个''，但仅删除了一个，而另一个则覆盖了页面。我将逻辑移到ngAfterViewInit上，该逻辑被调用一次，它解决了我的问题。

ngAfterViewChecked(){}

  {

    setTimeout(()=>this.isSignupProcess()); //moved this to ngViewInit

  }

请参见Getting different behaviour of bootstrap for almost identical html。我提出了另一个问题，其中有一个视频解释了这种行为。

我调试它的方式很有趣。我在console.log中添加了几个bootstrap.js，并观察到我添加的消息被重复打印。