How can I use dismissableMask in PrimeNG

Question

I am trying to hide a dialog when I click outside of dialog, but I can't make it with dismissabeMask in PrimeNG. Can anyone help me please ?

HTML

<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></button>
<p-dialog [(visible)]="display" [(dismissableMask)]="mask"> 
    <p-header>
        Error Message
    </p-header>
        <label>Label</label>
    <p-footer>
    </p-footer>
</p-dialog

TS

mask: boolean = false;
showDialog() {
  this.msg = this.errorMessages[id];
  this.display = true;
  this.mask = true;
}

score 5 · Accepted Answer · answered Mar 16 '18 at 12:59

5

Change

<p-dialog [(visible)]="display" [(dismissableMask)]="mask">

with

<p-dialog [(visible)]="display" modal="true" dismissableMask="true">

If you don't add modal="true", it won't work (see Plunker)

answered Mar 16 '18 at 12:59

Antikhippe

6,316
2
28
43

it is working but , background is scrolling when i try to scroll. – I'mVSPA Mar 16 '18 at 13:04
1

Add `[blockScroll]=true` to your `p-dialog`. – Antikhippe Mar 16 '18 at 13:23

How can I use dismissableMask in PrimeNG

1 Answers1