以整个窗口空间( taking e

我的角应用程序的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是角状的部件，它显示/隐藏使用JavaScript API引导的模态modal('show')和modal('hide')

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

我的问题是，自举似乎添加<div class="modal-backdrop fade"></div>其中占据整个页面，使其他组件不可点击的HTML。 见下面的照片。 你会发现， div需要的整个空间，即使因为点击后的模式是不可见的close的模式，它采用隐藏$(this.dialogRef.nativeElement).modal('hide');

有趣的是，注意到模式DIV是内部app-dialog元素，但模态背景格是不是在同一水平！ （参见图二）我能做什么来解决我的问题？

UPDATE

仍然无法找到答案，但这个问题确实似乎是z-index值。 模式对话框是内创建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>中，背景是总在最前面。 正如上文引导莫代尔坐在后面的背景

“虽然.modal的z指数比.modal-背景下的高，如果.modal是在父DIV，z索引不会采取优先和.modal-背景下将具有更高的Z-index`。这是因为，如果家长有较低的z-index比.modal-背景下，一切都在这将是模态的背后，无论给孩子任何的z-index的。”

Answer 1:

这个问题是完全不同的东西！ 我已经添加了逻辑，以显示modal中ngAfterViewChecked 。 此功能得到由角（见角生命周期挂钩）多次呼吁。 看来，由于该功能的重复执行， Bootstrap被添加多个``但只去掉一个留下一个又一个覆盖网页。 让我感动的逻辑ngAfterViewInit被调用一次，它解决了我的问题。

ngAfterViewChecked(){}

  {

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

  }

见获取引导不同的行为几乎是相同的HTML 。 我创造了另一个问题，它有它说明了其行为的视频。

我调试它的方式很有意思。 我加入少数console.log在bootstrap.js并观察到正在重复打印我已经加入的消息。

文章来源:

taking entire window space