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

Answer 2

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

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

但是，如果要在组件级别使用CSS，则必须使用ng-deep，如下所示-

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

PS：顺便说一句，对z-index使用太大的属性（如100000）不是很好。（根据评论部分）

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

2 个答案: