web-dev-qa-db-ja.com

AngularアプリケーションのPrimeNG p-ダイアログモーダルは、背景とダイアログウィンドウ自体をブロックします

私はp-dialogPrimeNGコンポーネントをAngular 5アプリケーションで次のように使用しています：

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

それは異常なことではありません。ダイアログをモーダル（上記のように）にすると、背景のみをブロックする代わりに、ダイアログウィンドウがグレー表示され、キャンセルボタンを押すことができません。終了する唯一の方法は、Escキーを押すことです。

ダイアログウィンドウは、モーダルにしないと問題なく動作しますが、モーダルにしたいのですが。誰かがp-dialogでこの問題を抱えていましたか？しばらく検索してみましたが、以前に投稿されたこの問題は見つかりませんでした。

PrimeNG 5.2.0-rc.2でAngular 5を使用しています==

angularprimengprimeng-dialog
9
Rands

追加してみましたか

[appendTo]=“‘body’”

PDialogは少々悪夢のようです。ダイアログタグがコンテナー内にある場合、この問題が発生しました。

8
PaulParton