diff --git a/packages/primevue/src/confirmationoptions/ConfirmationOptions.d.ts b/packages/primevue/src/confirmationoptions/ConfirmationOptions.d.ts index af2fa06dc..69bb2054c 100644 --- a/packages/primevue/src/confirmationoptions/ConfirmationOptions.d.ts +++ b/packages/primevue/src/confirmationoptions/ConfirmationOptions.d.ts @@ -5,6 +5,7 @@ * @module confirmationoptions * */ +import type { HintedString } from '@primevue/core'; import type { ButtonProps } from 'primevue/button'; /** @@ -41,6 +42,17 @@ export interface ConfirmationOptions { * @defaultValue false */ blockScroll?: boolean | undefined; + /** + * A valid query selector or an HTMLElement to specify where the confirm dialog gets attached. + * Special keywords are 'body' for document body and 'self' for the element itself. + * @defaultValue body + */ + appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement; + /** + * Defines if background should be blocked when confirm dialog is displayed. + * @defaultValue false + */ + modal?: boolean | undefined; /** * Callback to execute when action is confirmed. * @todo Next release should be able to change diff --git a/packages/primevue/src/confirmdialog/ConfirmDialog.vue b/packages/primevue/src/confirmdialog/ConfirmDialog.vue index fa9b152a4..a47141d1f 100644 --- a/packages/primevue/src/confirmdialog/ConfirmDialog.vue +++ b/packages/primevue/src/confirmdialog/ConfirmDialog.vue @@ -3,9 +3,10 @@ v-model:visible="visible" role="alertdialog" :class="cx('root')" - :modal="true" + :modal="modal" :header="header" :blockScroll="blockScroll" + :appendTo="appendTo" :position="position" :breakpoints="breakpoints" :closeOnEscape="closeOnEscape" @@ -125,6 +126,15 @@ export default { } }, computed: { + appendTo() { + return this.confirmation ? this.confirmation.appendTo : 'body'; + }, + target() { + return this.confirmation ? this.confirmation.target : null; + }, + modal() { + return this.confirmation ? (this.confirmation.modal == null ? true : this.confirmation.modal) : true; + }, header() { return this.confirmation ? this.confirmation.header : null; },