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

Resort

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.

Medwin

It is occurring for me in the p-confirmDialog also can you please provide a code sample of how to use [appendTo]=“‘body’” this property ? – Giddy

@NasrulBharathi hey! Haven’t tested this but it is in the docs for confirmDialog. Should be <p-confirmDialog [appendTo]=“‘body“ .... – Medwin

nice one. I had a dialog with a form field in it. I could not focus the field, click in it or tab to it or anything. Could not enter data. This fixed it. thanks – Selfknowledge

Answer 2

Late Answer, but might help someone

Adding appendTo ="body" will make the blur effect of background screen fix .

To remove the background blur fully, remove the following parameter from p-dialog [modal]="true"

Delhi