PrimeNG p-dialog modal in Angular application blocks background and the dialog window itself

Question

I am using a p-dialog PrimeNG component in my Angular 5 application like this:

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

It's nothing out of the ordinary. If I make the dialog modal (like above) then instead of blocking out only the background, even my dialog window is greyed-out, and I cannot press my Cancel button. The only way to exit is to press the Esc key.

The dialog window works fine if I don't make it modal but I'd like to make it modal. Anyone had this issue with p-dialog? I've search all over for awhile now but could not see this issue posted before.

I'm using Angular 5 with PrimeNG 5.2.0-rc.2

Answer 1

Have you tried adding

[appendTo]=“‘body’”

The pDialog can be a bit of a nightmare. I would get this problem when the dialog tag was inside a container.