Fixed #6456

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

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;
         },