Angular 应用程序中的 PrimeNG p-dialog 模态块背景和对话框 window 本身

Question

我在 Angular 5[=29 中使用 p-dialog PrimeNG 组件=] 像这样的应用程序：

<p-dialog [(visible)]="displayModal" [modal]="true" [width]="500" [height]="450" >
    <p-header> Title </p-header>
    <div class="form-group">
        <label for="approverComment">Comment</label>
        <textarea class="form-control" id="approverComment" rows="8"></textarea>
    </div>
    <p-footer>
        <button type="button" pButton icon="fa-close" (click)="displayModal=false" label="Cancel"></button>
    </p-footer>
</p-dialog>

没什么异常。如果我将对话框设置为模态（如上），那么我的对话框 window 会变成灰色，而不是只遮挡背景，我无法按 取消 按钮。退出的唯一方法是按 Esc 键。

对话框 window 如果我不将其设置为模态，则它工作正常，但我想将其设置为模态。 p-dialog 有人遇到过这个问题吗？我已经搜索了一段时间，但之前没有看到这个问题。

我正在使用 Angular 5 和 PrimeNG 5.2.0-rc.2

Answer 1

你试过添加

[appendTo]=“‘body’”

pDialog 可能有点像噩梦。当对话框标签在容器内时，我会遇到这个问题。

Answer 2

迟到的答案，但可能对某人有所帮助

添加appendTo ="body"将修复背景画面的模糊效果。

要完全消除背景模糊，从 p-dialog [modal]="true"

中删除以下 参数