Angular NgbModal。如何使特定模态成为所有其他模态的最顶层？

Question

我正在使用ng-bootstrap库。

盒子里有什么？

当显示两个模态时，顶部的背景不会覆盖底部的主体。

什么是任务？

任务是制作一个特定的模态，它的背景是所有其他模态的最顶层。

图书馆本身doesn't provide是必要的API。

是否有解决问题的解决方法？

Answer 1

为了使一个模态最顶层，我使用了twoCtrl：

NgbModalOptions.container

它将我的模态放入根组件中准备的特殊最顶层容器中。

HTML：

const options: NgbModalOptions = { ... container: '.session-modal-container' };

CSS：

<div class="session-modal-container"></div>

Answer 2

这对我有用。

在父类中，设置css类名。

const options: NgbModalOptions = {
  backdropClass: '.app-session-modal-backdrop',
  windowClass: '.app-session-modal-window'
};

this.modalService.open(DialogComponent, options)

在对话框类中，设置组件ViewEncapsulation.None。

@Component({
  styleUrls: [dialog.component.scss],
  encapsulation: ViewEncapsulation.None,
})

在对话框css类中，使用css类名定义父类。并编写您想要的 z-index。不要忘记添加!important。

ngb-modal-window.app-session-modal-window {
  z-index: 999 !important;
}
ngb-modal-window.app-session-modal-backdrop {
  z-index: 999 !important;
}

Answer 3

我已经更新了样式并给出了重要提示。有用。基本上我的问题是上面的模态，我需要显示 Mat 自动完成，这有 z-index:1000 尝试了很多。

::ng-deep ngb-modal-backdrop {
  z-index: 999 !important;

}
::ng-deep ngb-modal-window{
  z-index: 999 !important;

}