Question

我正在使用primeng和ng-bootstrap组件来制作一个有角度的网站。

要捕获信息，我在ng-bootstrap模态中使用一种形式。单击该模式的“保存”按钮时，应显示启动确认对话框。问题在于它出现在模态后面。

我该如何解决？

这是我的一些HTML：

<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle" width="425" appendTo="body"></p-confirmDialog>

<ng-template #modalFormOrder let-c="close" let-d="dismiss" id="modalFormOrder">
    <div class="modal-header">
        ...
    </div>
    <div class="modal-body">
        ...
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-light" (click)="c('Close click')">Close</button>
        <button type="button" class="btn m-btn--pill m-btn--air btn-success" (click)="SaveEditLoadOrder()">Save</button>
    </div>
</ng-template>

Answer 1

我以某种方式确保两个对话框都使用z-index CSS属性使用要首先显示的元素更大的数字覆盖z-index CSS属性，例如z-index：1001;

如果要覆盖PrimeNG的Css，建议您将其写在/src/styles.css上。以下示例覆盖了日历CSS

(?:^|[^.?!-]*(?<=[.?\s!-]))\bpfs\b(?=[\s.?!-])[^.?!-]*[.?!-]

在PrimeNG文档中，您可以找到要为每个组件覆盖的CSS类

Angular-Primeng的confirmDialog显示在ng-bootstrap的模式后面

1 个答案: