< div class =“模态背景淡入"</div占用整个窗户空间 [英] <div class="modal-backdrop fade"></div> taking entire window space

问题描述

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

The HTML of my Angular application has a modal box which pops on application start up.

<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的模态.

app-dialog-box is an Angular component and it shows/hides Bootstrap's modal using JavaScript API modal('show') and 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');

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

My issue is that Bootstrap seem to add <div class="modal-backdrop fade"></div> in the html which takes up the entire page and makes other components unclickable. See the pic below. You'll notice that the div takes the entire space even when the modal is not visible because after clicking close on the modal, it is hidden using $(this.dialogRef.nativeElement).modal('hide');

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

It is interesting to notice that the modal div is within the app-dialog element but the modal background div is not at the same level! (see pic 2) What could I do to solve my issue?

更新

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

Still not able to find the answer but the issue certainly seems to be with z-index value. The modal box is created within the app-dialog-box within app-root

<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-index低于<div class="modal-backdrop fade show"></div>的z-index，因此背景始终位于最上方.如 Bootstrap Modal坐在幕后

But Bootstrap adds the <div class="modal-backdrop fade show"></div> at the same level as app-root and not inside app-root. As app-root's z-index is lower than that of <div class="modal-backdrop fade show"></div>, the backdrop is always on top. As explained in 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值如何，其所有内容都将位于模态后面."

" Although the z-index of the .modal is higher than that of the .modal-backdrop, if .modal is in a parent div, z-index will not take priority and .modal-backdrop will have higher z-index`. This is because if the parent has lower z-index than the .modal-backdrop, everything in it will be behind the modal, irrespective of any z-index given to the children."

推荐答案

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

The issue was something entirely different! I had added the logic to show the modal in ngAfterViewChecked. This function gets called repeatedly by Angular (see Lifecycle hook in Angular). It seems that due to repeated execution of this function, Bootstrap was adding multiple `` but was removing only one leaving another one to cover the page. I moved the logic to ngAfterViewInit which is called once and it solved my issue.

ngAfterViewChecked(){}

  {

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

  }

请参见为几乎相同的html获取bootstrap的不同行为.我提出了另一个问题，其中有一个视频解释了这种行为.

See Getting different behaviour of bootstrap for almost identical html. I created another problem, it has a video which explains the behaviour.

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

The way I debugged it was interesting. I added few console.log in bootstrap.js and observed that the messages I had added were being printed repeatedly.

这篇关于< div class =“模态背景淡入"</div占用整个窗户空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！