title: Primeng dialog not accessible
body: <p>I am using  &quot;primeng&quot;: &quot;^4.0.0-rc.2&quot; with &quot;@angular/cli&quot;: &quot;^1.0.0&quot; and angular4. When I try to use dialog the dialog is not accessible - it is hidden behind the overlay that should prevent access to the remainder of the page. Please see the graphic below</p>
  <p><a href="https://i.stack.imgur.com/wcSW9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wcSW9.png" alt="enter image description here" /></a></p>
  <p>I expected the dialog to be clickable but the Phone UI to be unclickagle. A snippet of the cod is shown below:</p>
  <h2>html</h2>
  <pre><code> &lt;p-confirmDialog width = &quot;425&quot;
                             class = 'dialog-z-index'&gt;&lt;/p-confirmDialog&gt;
  </code></pre>
  <h2>typescript</h2>
  <pre><code>confirm() {
      this._confirmationSrvc.confirm(
          {
            message: `Are you sure you want to delete the phone entry? ${
                jsonStringify( this.deletionData )}`,
            header: 'Delete Confirmation',
            icon: 'fa fa-trash',
            accept: () =&gt; {
            }
          } )
    }
  
    onDeleteConfirm( event ): void {
      this.deletionData = event.data as IPhone
      this.isDialog = true
      if ( this.isDialog ) {
        this.confirm()
        event.confirm.resolve()
        event.source.onChangedSource.subscribe(
            changedSrc =&gt; {
              if ( this.currentData.length &lt; 1 ) {
              }
              else {
              
              }
            } )
        
      }
      else {
        event.confirm.reject()
      }
    }
  </code></pre>
  <p>What could be causing this unexpected behaviour?</p>
  <p>Thanks</p>