0

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

  <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;
}

我尝试过的任何事情都没有奏效，到目前为止，任何帮助都将不胜感激。

4

2 回答 2

2

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

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

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

请参考这个 SO question 的答案，了解为什么可以使用 ::ng-deep 直到另行通知。

用什么代替 ::ng-deep

于 2018-11-29T13:31:28.137 回答
1

相反，最好在全局 css 中使用相同的 css（根级别的 Style.css）

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

但是，如果您想在组件级别使用 css，那么您必须需要ng-deep如下 -

:host ::ng-deep .ui-confirmdialog {
    z-index: 1001 !important;
}

PS：顺便说一句，将这么大的属性（如 100000 ）用于 z-index 是不好的。（根据评论部分）

于 2018-11-29T13:34:21.037 回答