title: PrimeNG p-dialog modal in Angular application blocks background and the dialog window itself
body: <p>I am using a <strong>p-dialog</strong> <strong>PrimeNG</strong> component in my <strong>Angular 5</strong> application like this:</p>
  
  <pre><code>&lt;p-dialog [(visible)]="displayModal" [modal]="true" [width]="500" [height]="450" &gt;
      &lt;p-header&gt; Title &lt;/p-header&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="approverComment"&gt;Comment&lt;/label&gt;
          &lt;textarea class="form-control" id="approverComment" rows="8"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;p-footer&gt;
          &lt;button type="button" pButton icon="fa-close" (click)="displayModal=false" label="Cancel"&gt;&lt;/button&gt;
      &lt;/p-footer&gt;
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p>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 <strong>Cancel</strong> button. The only way to exit is to press the <strong>Esc</strong> key.</p>
  
  <p>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 <code>p-dialog</code>? I've search all over for awhile now but could not see this issue posted before.</p>
  
  <p>I'm using <strong>Angular 5</strong> with <strong>PrimeNG 5.2.0-rc.2</strong></p>