css - 对话框内的 Angular 6 Primeng 确认对话框停用页面

Question

我正在尝试将确认对话框添加到导航栏组件中的对话框中。

  <p-menubar>
      <div>
          <app-overlay></app-overlay>
      </div>
  </p-menubar>

这个组件有一个覆盖面板，可以打开一个对话框。在打开它的页面上，内部还有一个用于其他原因的确认对话框。每当打开覆盖面板确认对话框时，它都会打开另一个使屏幕变灰并卡住屏幕。我已经使用 z 索引将对话框向前推进，但在关闭对话框后背景仍然被禁用。我也试过 [appendTo]="body"。如果我删除后页上的确认对话框，它就会正常运行。所以，我知道这与有两个有关，一个打开另一个。

内部组件也有一个激活时打开的确认对话框:

<p-dialog>
    <p-confirmDialog [appendTo]="body"></p-confirmDialog>
    <p-messages [(value)]="errors"></p-messages>
    <div>
    </div>
    <p-footer>
    </p-footer>
</p-dialog>

一些CSS:

.ui-confirmdialog {
     z-index: 100000 !important;
}

我尝试过的任何方法都没有奏效，目前任何帮助都将不胜感激。

Answer 1

尝试将以下内容添加到您的组件样式表

::ng-deep .ui-confirmdialog {
  z-index:100000 !important
}

如果没有::ng-deep，它将需要进入您的全局样式表。

---

请引用这个 SO 问题的答案，了解为什么可以使用::ng-deep，直至另行通知。

What to use in place of ::ng-deep