Question

我在 Angular 5 应用程序中使用 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>

没有什么不同寻常的。如果我创建对话框模态（如上所述），那么不是仅阻挡背景，甚至我的对话框窗口都是灰色的，我也不能按取消按钮。退出的唯一方法是按 Esc 键。

如果我没有将模态设为模态，那么对话框窗口可以正常工作，但我想将其设置为模态。任何人都遇到p-dialog这个问题？我现在已经搜索了一段时间，但之前没有看到这个问题。

我使用 Angular 5 与 PrimeNG 5.2.0-rc.2

Answer 1

您是否尝试过添加

[appendTo]=“‘body’”

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

Answer 2

最新答案，但可能会帮助某人

添加appendTo ="body"将使背景屏幕修复变得模糊。

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

中 删除以下 参数

Angular应用程序中的PrimeNG p-dialog模式会阻止背景和对话框窗口本身

2 个答案: