diff --git a/src/views/confirmpopup/ConfirmPopupDoc.vue b/src/views/confirmpopup/ConfirmPopupDoc.vue index 5390ca1e9..48d6ee776 100644 --- a/src/views/confirmpopup/ConfirmPopupDoc.vue +++ b/src/views/confirmpopup/ConfirmPopupDoc.vue @@ -31,20 +31,22 @@ import ConfirmPopup from 'primevue/confirmpopup';
Getting Started
-

ConfirmPopup is displayed by calling the require method of the $confirm instance by passing the options to customize the Popup.

+

ConfirmPopup is displayed by calling the require method of the $confirm instance by passing the options to customize the Popup. + target attribute is mandatory to align the popup to its caller.

 
 <ConfirmPopup></ConfirmPopup>
 
-<Button @click="delete()" icon="pi pi-check" label="Confirm"></Button>
+<Button @click="delete($event)" icon="pi pi-check" label="Confirm"></Button>
 
 
 export default {
 	methods: {
-        delete() {
+        delete(event) {
             this.$confirm.require({
+                target: event.currentTarget,
                 message: 'Are you sure you want to proceed?',
                 icon: 'pi pi-exclamation-triangle',
                 accept: () => {
@@ -70,16 +72,21 @@ import { useConfirm } from "primevue/useconfirm";
 export default defineComponent({
     setup() {
         const confirm = useConfirm();
-        confirm.require({
-            message: 'Are you sure you want to proceed?',
-            icon: 'pi pi-exclamation-triangle',
-            accept: () => {
-                //callback to execute when user confirms the action
-            },
-            reject: () => {
-                //callback to execute when user rejects the action
-            }
-        });
+
+        function delete(event) {
+            confirm.require({
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    //callback to execute when user confirms the action
+                },
+                reject: () => {
+                    //callback to execute when user rejects the action
+                }
+            });
+        } 
+        
+        return {delete};
     }
 })
 
@@ -112,6 +119,12 @@ export default {
                             
                         
                         
+                            
+                                target
+                                DomElement
+                                null
+                                Element to align the overlay.
+                            
                             
                                 message
                                 string
@@ -263,8 +276,9 @@ export default {
 
 export default {
     methods: {
-        confirm1() {
+        confirm1(event) {
             this.$confirm.require({
+                target: event.currentTarget,
                 message: 'Are you sure you want to proceed?',
                 icon: 'pi pi-exclamation-triangle',
                 accept: () => {
@@ -275,8 +289,9 @@ export default {
                 }
             });
         },
-        confirm2() {
+        confirm2(event) {
             this.$confirm.require({
+                target: event.currentTarget,
                 message: 'Do you want to delete this record?',
                 icon: 'pi pi-info-circle',
                 acceptClass: 'p-button-danger',