diff --git a/api-generator/components/dialog.js b/api-generator/components/dialog.js index 1810934cf..96efd0501 100644 --- a/api-generator/components/dialog.js +++ b/api-generator/components/dialog.js @@ -71,6 +71,12 @@ const DialogProps = [ default: 'true', description: 'Whether to show the header or not.' }, + { + name: 'blockScroll', + type: 'boolean', + default: 'false', + description: 'Whether background scroll should be blocked when dialog is visible.' + }, { name: 'baseZIndex', type: 'number', diff --git a/components/lib/dialog/BaseDialog.vue b/components/lib/dialog/BaseDialog.vue index c6b977115..706b126f3 100644 --- a/components/lib/dialog/BaseDialog.vue +++ b/components/lib/dialog/BaseDialog.vue @@ -247,6 +247,10 @@ export default { type: Boolean, default: true }, + blockScroll: { + type: Boolean, + default: false + }, baseZIndex: { type: Number, default: 0 diff --git a/components/lib/dialog/Dialog.d.ts b/components/lib/dialog/Dialog.d.ts index 99bbbbfcd..98190f8aa 100755 --- a/components/lib/dialog/Dialog.d.ts +++ b/components/lib/dialog/Dialog.d.ts @@ -202,6 +202,11 @@ export interface DialogProps { * @defaultValue true */ showHeader?: boolean | undefined; + /** + * Whether background scroll should be blocked when dialog is visible. + * @defaultValue false + */ + blockScroll?: boolean | undefined; /** * Base zIndex value to use in layering. * @defaultValue 0 diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue index 7c0b19faa..e31f85313 100755 --- a/components/lib/dialog/Dialog.vue +++ b/components/lib/dialog/Dialog.vue @@ -208,12 +208,12 @@ export default { } }, enableDocumentSettings() { - if (this.modal || (this.maximizable && this.maximized)) { + if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) { DomHandler.addClass(document.body, 'p-overflow-hidden'); } }, unbindDocumentState() { - if (this.modal || (this.maximizable && this.maximized)) { + if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) { DomHandler.removeClass(document.body, 'p-overflow-hidden'); } },