Primeng: modal dialogs should prevent the background from being scrolleable

[gatapia]

Using Ultima theme.

If we have a modal dialog then the background should not be scrollable when the dialog is visible.

If you could just add a 'modal-dialog-visible' class to the body this would sort the issue out.

[staran]

+1, additionally the background text should not be selectable when being in the process of selecting text in the dialog and leaving its borders

[iischwuerfl]

+1

[hparfen]

+1

[dhniels]

Did this get added in 4.1.0? I still get the page scrolling in the background when scrolling the dialog with modal set to true.

[pchriste24]

To add to this issue, with modal=true you can Tab over inputs in the background and then edit their values.

[brettkc]

As others have stated there still seems to be issues with this. I've got a dropdown in my modal dialog and the page in the background is still scrollable and completely messes up the rendering of the dropdown if you scroll outside of the modal.

[TheAvalanche]

This feature is undocumented for some reason. But you can block body from scrolling by adding [blockScroll]=true to your p-dialog component.

For example:

<p-dialog header="Title" [(visible)]="showDetailsModal" [modal]="true" [draggable]="false" [positionLeft]="0" [positionTop]="0" [blockScroll]="true">
...
</p-dialog>

[ravikumarpamarthi]

Thanks @TheAvalanche

[dhniels]

Using [blockScroll]="true" is anyone else having an issue where it still scrolls the body on touch devices? testing on my iphone, scrolling the dialog content scrolls the body content behind the dialog. on desktop it works fine and blocks scrolling.

[pedrotcm]

In IOS devices still scrolls the body, same using [blockScroll]="true" and [modal]="true".