Prime Community Forum

Posted: **12 Sep 2017, 19:22**

I need to be able to control the z-index for both the overlay and the dialog box that comes along with p-dialog. I have several other elements with higher z-index that I need the modal to cover.

I was able to override the overlay like so:

Code: Select all

.ui-widget-overlay {
  background: #666666;
  opacity: .50;
  filter: Alpha(Opacity=50);
  z-index: 1500 !important;
}

But overriding the .ui-dialog doesn't seem to affect it whatsoever. Any thoughts?

Posted: **14 Sep 2017, 08:47**

I also have similar issue, I am using modal dialogue and p-calendar inside it, but due to incremental z-index feature of primeNG, calendar goes in background as I click on modal.
Is there any fix provided by PrimeNG on this, other than setting z-index manually (at a higher value) to DOM handle.?

Posted: **14 Sep 2017, 14:52**

Honestly, I'm inches away from ditching the PrimeNG modal and going with something more flexible. I've spent hours trying to exert z-index control on the modal window with zero success. Seems like there are far more flexible options at the ready:

http://jasonwatmore.com/post/2017/01/24 ... dialog-box

Posted: **17 Nov 2017, 09:54**

The issue has been fixed by prime Team.
https://github.com/primefaces/primeng/issues/3940

Prime Community Forum

Setting z-index on p-dialog overlays

Setting z-index on p-dialog overlays

Re: Setting z-index on p-dialog overlays

Re: Setting z-index on p-dialog overlays

Re: Setting z-index on p-dialog overlays