diff --git a/components/lib/confirmdialog/ConfirmDialog.d.ts b/components/lib/confirmdialog/ConfirmDialog.d.ts
index d7c278c876..3e4b0094e9 100644
--- a/components/lib/confirmdialog/ConfirmDialog.d.ts
+++ b/components/lib/confirmdialog/ConfirmDialog.d.ts
@@ -23,6 +23,7 @@ interface ConfirmDialogOptions {
 }
 
 export interface ConfirmDialogProps extends Omit<DialogProps, 'onHide'> {
+    tagKey?: string;
     visible?: boolean;
     message?: ConfirmDialogTemplateType;
     rejectLabel?: string;
@@ -46,6 +47,8 @@ interface ConfirmDialogReturn {
     hide(): void;
 }
 
-export declare class ConfirmDialog extends React.Component<ConfirmDialogProps, any> { }
+export declare class ConfirmDialog extends React.Component<ConfirmDialogProps, any> {
+    public confirm(props?: ConfirmDialogProps): void;
+}
 
 export declare function confirmDialog(props: ConfirmDialogProps): ConfirmDialogReturn;
diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js
index 7a4942b884..7cf89c5a2b 100644
--- a/components/lib/confirmdialog/ConfirmDialog.js
+++ b/components/lib/confirmdialog/ConfirmDialog.js
@@ -1,115 +1,140 @@
-import React, { forwardRef, memo, useState } from 'react';
-import ReactDOM from 'react-dom';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { localeOption } from '../api/Api';
 import { Dialog } from '../dialog/Dialog';
 import { Button } from '../button/Button';
 import { Portal } from '../portal/Portal';
-import { DomHandler, ObjectUtils, classNames, IconUtils } from '../utils/Utils';
-import { useUpdateEffect } from '../hooks/Hooks';
-
-export const confirmDialog = (props) => {
-    const appendTo = props.appendTo || document.body;
-
-    const confirmDialogWrapper = document.createDocumentFragment();
-    DomHandler.appendChild(confirmDialogWrapper, appendTo);
+import { ObjectUtils, classNames, IconUtils } from '../utils/Utils';
+import { useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { OverlayService } from '../overlayservice/OverlayService';
 
+export const confirmDialog = (props = {}) => {
     props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } };
+    props.visible && OverlayService.emit('confirm-dialog', props);
 
-    const confirmDialogEl = React.createElement(ConfirmDialog, props);
-    ReactDOM.render(confirmDialogEl, confirmDialogWrapper);
-
-    const updateConfirmDialog = (newProps) => {
-        props = { ...props, ...newProps };
-        ReactDOM.render(React.cloneElement(confirmDialogEl, props), confirmDialogWrapper);
-    };
-
-    return {
-        _destroy: () => {
-            ReactDOM.unmountComponentAtNode(confirmDialogWrapper);
-        },
-        show: () => {
-            updateConfirmDialog({
-                visible: true, onHide: () => {
-                    updateConfirmDialog({ visible: false }); // reset
-                }
-            });
-        },
-        hide: () => {
-            updateConfirmDialog({ visible: false });
-        },
-        update: (newProps) => {
-            updateConfirmDialog(newProps);
-        }
+    const show = (updatedProps = {}) => {
+        OverlayService.emit('confirm-dialog', { ...props, ...updatedProps, ...{ visible: true } });
+    }
+
+    const hide = () => {
+        OverlayService.emit('confirm-dialog', { visible: false });
     }
+
+    return [show, hide];
 }
 
 export const ConfirmDialog = memo(forwardRef((props, ref) => {
     const [visibleState, setVisibleState] = useState(props.visible);
-    const acceptLabel = props.acceptLabel || localeOption('accept');
-    const rejectLabel = props.rejectLabel || localeOption('reject');
+    const [reshowState, setReshowState] = useState(false);
+    const confirmProps = useRef(null);
+    const getCurrentProps = () => confirmProps.current || props;
+    const getPropValue = (key) => (confirmProps.current || props)[key];
+    const callbackFromProp = (key, ...param) => ObjectUtils.getPropValue(getPropValue(key), param);
+
+    const acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
+    const rejectLabel = getPropValue('rejectLabel') || localeOption('reject');
 
     const accept = () => {
-        props.accept && props.accept();
+        callbackFromProp('accept');
         hide('accept');
     }
 
     const reject = () => {
-        props.reject && props.reject();
+        callbackFromProp('reject');
         hide('reject');
     }
 
     const show = () => {
-        setVisibleState(true)
+        setVisibleState(true);
     }
 
     const hide = (result) => {
         setVisibleState(false);
-        props.onHide && props.onHide(result);
+        callbackFromProp('onHide', result);
     }
 
-    useUpdateEffect(() => {
-        setVisibleState(props.visible);
+    const confirm = (updatedProps) => {
+        if (updatedProps.tagKey === props.tagKey) {
+            const isVisibleChanged = visibleState !== updatedProps.visible;
+            const targetChanged = getPropValue('target') !== updatedProps.target;
+
+            if (targetChanged && !props.target) {
+                hide();
+                confirmProps.current = updatedProps;
+                setReshowState(true);
+            }
+            else if (isVisibleChanged) {
+                confirmProps.current = updatedProps;
+                updatedProps.visible ? show() : hide();
+            }
+        }
+    }
+
+    useEffect(() => {
+        props.visible ? show() : hide();
     }, [props.visible]);
 
+    useEffect(() => {
+        if (!props.target && !props.message) {
+            OverlayService.on('confirm-dialog', confirm);
+        }
+
+        return () => {
+            OverlayService.off('confirm-dialog', confirm);
+        }
+    }, [props.target]);
+
+    useUpdateEffect(() => {
+        reshowState && show();
+    }, [reshowState]);
+
+    useUnmountEffect(() => {
+        OverlayService.off('confirm-dialog', confirm);
+    });
+
+    useImperativeHandle(ref, () => ({
+        confirm
+    }));
+
     const createFooter = () => {
-        const acceptClassName = classNames('p-confirm-dialog-accept', props.acceptClassName);
+        const acceptClassName = classNames('p-confirm-dialog-accept', getPropValue('acceptClassName'));
         const rejectClassName = classNames('p-confirm-dialog-reject', {
-            'p-button-text': !props.rejectClassName
-        }, props.rejectClassName);
+            'p-button-text': !getPropValue('rejectClassName')
+        }, getPropValue('rejectClassName'));
         const content = (
             <>
-                <Button label={rejectLabel} icon={props.rejectIcon} className={rejectClassName} onClick={reject} />
-                <Button label={acceptLabel} icon={props.acceptIcon} className={acceptClassName} onClick={accept} autoFocus />
+                <Button label={rejectLabel} icon={getPropValue('rejectIcon')} className={rejectClassName} onClick={reject} />
+                <Button label={acceptLabel} icon={getPropValue('acceptIcon')} className={acceptClassName} onClick={accept} autoFocus />
             </>
         );
 
-        if (props.footer) {
+        if (getPropValue('footer')) {
             const defaultContentOptions = {
-                accept: accept,
-                reject: reject,
+                accept,
+                reject,
                 acceptClassName,
                 rejectClassName,
                 acceptLabel,
                 rejectLabel,
                 element: content,
-                props
+                props: getCurrentProps()
             };
 
-            return ObjectUtils.getJSXElement(props.footer, defaultContentOptions);
+            return ObjectUtils.getJSXElement(getPropValue('footer'), defaultContentOptions);
         }
 
         return content;
     }
 
     const createElement = () => {
-        const className = classNames('p-confirm-dialog', props.className);
-        const dialogProps = ObjectUtils.findDiffKeys(props, ConfirmDialog.defaultProps);
-        const message = ObjectUtils.getJSXElement(props.message, props);
-        const icon = IconUtils.getJSXIcon(props.icon, { className: 'p-confirm-dialog-icon' }, { props });
+        const currentProps = getCurrentProps();
+        const className = classNames('p-confirm-dialog', getPropValue('className'));
+        const dialogProps = ObjectUtils.findDiffKeys(currentProps, ConfirmDialog.defaultProps);
+        const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
+        const icon = IconUtils.getJSXIcon(getPropValue('icon'), { className: 'p-confirm-dialog-icon' }, { props: currentProps });
         const footer = createFooter();
 
         return (
-            <Dialog visible={visibleState} {...dialogProps} className={className} footer={footer} onHide={hide} breakpoints={props.breakpoints}>
+            <Dialog visible={visibleState} {...dialogProps} className={className} footer={footer} onHide={hide} breakpoints={getPropValue('breakpoints')}>
                 {icon}
                 <span className="p-confirm-dialog-message">{message}</span>
             </Dialog>
@@ -118,11 +143,12 @@ export const ConfirmDialog = memo(forwardRef((props, ref) => {
 
     const element = createElement();
 
-    return <Portal element={element} appendTo={props.appendTo} />
+    return <Portal element={element} appendTo={getPropValue('appendTo')} />
 }));
 
 ConfirmDialog.defaultProps = {
     __TYPE: 'ConfirmDialog',
+    tagKey: undefined,
     visible: false,
     message: null,
     rejectLabel: null,
diff --git a/components/lib/confirmpopup/ConfirmPopup.d.ts b/components/lib/confirmpopup/ConfirmPopup.d.ts
index 13ae7a91bb..37c70af050 100644
--- a/components/lib/confirmpopup/ConfirmPopup.d.ts
+++ b/components/lib/confirmpopup/ConfirmPopup.d.ts
@@ -20,6 +20,7 @@ interface ConfirmPopupOptions {
 }
 
 export interface ConfirmPopupProps {
+    tagKey?: string;
     target?: HTMLElement;
     visible?: boolean;
     message?: ConfirmPopupTemplateType;
@@ -47,6 +48,8 @@ interface ConfirmPopupReturn {
     hide(): void;
 }
 
-export declare class ConfirmPopup extends React.Component<ConfirmPopupProps, any> { }
+export declare class ConfirmPopup extends React.Component<ConfirmPopupProps, any> {
+    public confirm(props?: ConfirmPopupProps): void;
+}
 
 export declare function confirmPopup(props: ConfirmPopupProps): ConfirmPopupReturn;
diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
index ac13dfb789..2bc74e1ebd 100644
--- a/components/lib/confirmpopup/ConfirmPopup.js
+++ b/components/lib/confirmpopup/ConfirmPopup.js
@@ -1,58 +1,44 @@
-import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import PrimeReact, { localeOption } from '../api/Api';
 import { Button } from '../button/Button';
 import { Portal } from '../portal/Portal';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { DomHandler, ObjectUtils, classNames, ZIndexUtils, IconUtils } from '../utils/Utils';
-import { useUnmountEffect, useOverlayListener } from '../hooks/Hooks';
-
-export function confirmPopup(props) {
-    const appendTo = props.appendTo || document.body;
-
-    const confirmPopupWrapper = document.createDocumentFragment();
-    DomHandler.appendChild(confirmPopupWrapper, appendTo);
-
-    props = {...props, ...{ visible: props.visible === undefined ? true : props.visible }};
-
-    const confirmPopupEl = React.createElement(ConfirmPopup, props);
-    ReactDOM.render(confirmPopupEl, confirmPopupWrapper);
-
-    const updateConfirmPopup = (newProps) => {
-        props = { ...props, ...newProps };
-        ReactDOM.render(React.cloneElement(confirmPopupEl, props), confirmPopupWrapper);
-    };
-
-    return {
-        _destroy: () => {
-            ReactDOM.unmountComponentAtNode(confirmPopupWrapper);
-        },
-        show: () => {
-            updateConfirmPopup({ visible: true, onHide: () => {
-                updateConfirmPopup({ visible: false }); // reset
-            }});
-        },
-        hide: () => {
-            updateConfirmPopup({ visible: false });
-        },
-        update: (newProps) => {
-            updateConfirmPopup(newProps);
-        }
+import { useUnmountEffect, useOverlayListener, useUpdateEffect } from '../hooks/Hooks';
+
+export const confirmPopup = (props = {}) => {
+    props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } };
+    props.visible && OverlayService.emit('confirm-popup', props);
+
+    const show = (updatedProps = {}) => {
+        OverlayService.emit('confirm-popup', { ...props, ...updatedProps, ...{ visible: true } });
     }
+
+    const hide = () => {
+        OverlayService.emit('confirm-popup', { visible: false });
+    }
+
+    return [show, hide];
 }
 
 export const ConfirmPopup = memo(forwardRef((props, ref) => {
-    const [visibleState, setVisibleState] = useState(false);
+    const [visibleState, setVisibleState] = useState(props.visible);
+    const [reshowState, setReshowState] = useState(false);
     const overlayRef = useRef(null);
     const acceptBtnRef = useRef(null);
     const isPanelClicked = useRef(false);
     const overlayEventListener = useRef(null);
-    const acceptLabel = props.acceptLabel || localeOption('accept');
-    const rejectLabel = props.rejectLabel || localeOption('reject');
+    const confirmProps = useRef(null);
+    const getCurrentProps = () => confirmProps.current || props;
+    const getPropValue = (key) => (confirmProps.current || props)[key];
+    const callbackFromProp = (key, ...param) => ObjectUtils.getPropValue(getPropValue(key), param);
+
+    const acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
+    const rejectLabel = getPropValue('rejectLabel') || localeOption('reject');
 
     const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
-        target: props.target, overlay: overlayRef, listener: (event, { type, valid }) => {
+        target: getPropValue('target'), overlay: overlayRef, listener: (event, { type, valid }) => {
             if (valid) {
                 (type === 'outside') ? !isPanelClicked.current && hide() : hide();
             }
@@ -61,35 +47,32 @@ export const ConfirmPopup = memo(forwardRef((props, ref) => {
         }, when: visibleState
     });
 
-    const onCloseClick = (event) => {
-        hide();
-        event.preventDefault();
-    }
-
     const onPanelClick = (event) => {
         isPanelClicked.current = true;
 
         OverlayService.emit('overlay-click', {
             originalEvent: event,
-            target: props.target
+            target: getPropValue('target')
         });
     }
 
     const accept = () => {
-        props.accept && props.accept();
+        callbackFromProp('accept');
         hide('accept');
     }
 
     const reject = () => {
-        props.reject && props.reject();
+        callbackFromProp('reject');
         hide('reject');
     }
 
     const show = () => {
         setVisibleState(true);
+        setReshowState(false);
+
         overlayEventListener.current = (e) => {
             !isOutsideClicked(e.target) && (isPanelClicked.current = true);
-        };
+        }
 
         OverlayService.on('overlay-click', overlayEventListener.current);
     }
@@ -98,7 +81,7 @@ export const ConfirmPopup = memo(forwardRef((props, ref) => {
         setVisibleState(false);
         OverlayService.off('overlay-click', overlayEventListener.current);
         overlayEventListener.current = null;
-        props.onHide && props.onHide(result);
+        callbackFromProp('onHide', result);
     }
 
     const onEnter = () => {
@@ -109,11 +92,11 @@ export const ConfirmPopup = memo(forwardRef((props, ref) => {
     const onEntered = () => {
         bindOverlayListener();
 
-        if (acceptBtnRef && acceptBtnRef.current) {
+        if (acceptBtnRef.current) {
             acceptBtnRef.current.focus();
         }
 
-        props.onShow && props.onShow();
+        callbackFromProp('onShow');
     }
 
     const onExit = () => {
@@ -122,14 +105,15 @@ export const ConfirmPopup = memo(forwardRef((props, ref) => {
 
     const onExited = () => {
         ZIndexUtils.clear(overlayRef.current);
+        isPanelClicked.current = false;
     }
 
     const align = () => {
-        if (props.target) {
-            DomHandler.absolutePosition(overlayRef.current, props.target);
+        if (getPropValue('target')) {
+            DomHandler.absolutePosition(overlayRef.current, getPropValue('target'));
 
             const containerOffset = DomHandler.getOffset(overlayRef.current);
-            const targetOffset = DomHandler.getOffset(props.target);
+            const targetOffset = DomHandler.getOffset(getPropValue('target'));
             let arrowLeft = 0;
 
             if (containerOffset.left < targetOffset.left) {
@@ -147,22 +131,59 @@ export const ConfirmPopup = memo(forwardRef((props, ref) => {
         return overlayRef && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
     }
 
+    const confirm = (updatedProps) => {
+        if (updatedProps.tagKey === props.tagKey) {
+            const isVisibleChanged = visibleState !== updatedProps.visible;
+            const targetChanged = getPropValue('target') !== updatedProps.target;
+
+            if (targetChanged && !props.target) {
+                hide();
+                confirmProps.current = updatedProps;
+                setReshowState(true);
+            }
+            else if (isVisibleChanged) {
+                confirmProps.current = updatedProps;
+                updatedProps.visible ? show() : hide();
+            }
+        }
+    }
+
     useEffect(() => {
-        setVisibleState(props.visible);
+        props.visible ? show() : hide();
     }, [props.visible]);
 
+    useEffect(() => {
+        if (!props.target && !props.message) {
+            OverlayService.on('confirm-popup', confirm);
+        }
+
+        return () => {
+            OverlayService.off('confirm-popup', confirm);
+        }
+    }, [props.target]);
+
+    useUpdateEffect(() => {
+        reshowState && show();
+    }, [reshowState]);
+
     useUnmountEffect(() => {
         if (overlayEventListener.current) {
             OverlayService.off('overlay-click', overlayEventListener.current);
             overlayEventListener.current = null;
         }
 
+        OverlayService.off('confirm-popup', confirm);
         ZIndexUtils.clear(overlayRef.current);
     });
 
+    useImperativeHandle(ref, () => ({
+        confirm
+    }));
+
     const createContent = () => {
-        const message = ObjectUtils.getJSXElement(props.message, props);
-        const icon = IconUtils.getJSXIcon(props.icon, { className: 'p-confirm-popup-icon' }, { props });
+        const currentProps = getCurrentProps();
+        const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
+        const icon = IconUtils.getJSXIcon(getPropValue('icon'), { className: 'p-confirm-popup-icon' }, { props: currentProps });
 
         return (
             <div className="p-confirm-popup-content">
@@ -173,46 +194,46 @@ export const ConfirmPopup = memo(forwardRef((props, ref) => {
     }
 
     const createFooter = () => {
-        const acceptClassName = classNames('p-confirm-popup-accept p-button-sm', props.acceptClassName);
+        const acceptClassName = classNames('p-confirm-popup-accept p-button-sm', getPropValue('acceptClassName'));
         const rejectClassName = classNames('p-confirm-popup-reject p-button-sm', {
-            'p-button-text': !props.rejectClassName
-        }, props.rejectClassName);
+            'p-button-text': !getPropValue('rejectClassName')
+        }, getPropValue('rejectClassName'));
 
         const content = (
             <div className="p-confirm-popup-footer">
-                <Button label={rejectLabel} icon={props.rejectIcon} className={rejectClassName} onClick={reject} />
-                <Button ref={acceptBtnRef} label={acceptLabel} icon={props.acceptIcon} className={acceptClassName} onClick={accept} />
+                <Button label={rejectLabel} icon={getPropValue('rejectIcon')} className={rejectClassName} onClick={reject} />
+                <Button ref={acceptBtnRef} label={acceptLabel} icon={getPropValue('acceptIcon')} className={acceptClassName} onClick={accept} />
             </div>
         )
 
-        if (props.footer) {
+        if (getPropValue('footer')) {
             const defaultContentOptions = {
-                accept: accept,
-                reject: reject,
+                accept,
+                reject,
                 className: 'p-confirm-popup-footer',
                 acceptClassName,
                 rejectClassName,
                 acceptLabel,
                 rejectLabel,
                 element: content,
-                props
+                props: getCurrentProps()
             };
 
-            return ObjectUtils.getJSXElement(props.footer, defaultContentOptions);
+            return ObjectUtils.getJSXElement(getPropValue('footer'), defaultContentOptions);
         }
 
         return content;
     }
 
     const createElement = () => {
-        const className = classNames('p-confirm-popup p-component', props.className);
+        const className = classNames('p-confirm-popup p-component', getPropValue('className'));
         const content = createContent();
         const footer = createFooter();
 
         return (
-            <CSSTransition nodeRef={overlayRef} classNames="p-connected-overlay" in={visibleState} timeout={{ enter: 120, exit: 100 }} options={props.transitionOptions}
+            <CSSTransition nodeRef={overlayRef} classNames="p-connected-overlay" in={visibleState} timeout={{ enter: 120, exit: 100 }} options={getPropValue('transitionOptions')}
                 unmountOnExit onEnter={onEnter} onEntered={onEntered} onExit={onExit} onExited={onExited}>
-                <div ref={overlayRef} id={props.id} className={className} style={props.style} onClick={onPanelClick}>
+                <div ref={overlayRef} id={getPropValue('id')} className={className} style={getPropValue('style')} onClick={onPanelClick}>
                     {content}
                     {footer}
                 </div>
@@ -222,11 +243,12 @@ export const ConfirmPopup = memo(forwardRef((props, ref) => {
 
     const element = createElement();
 
-    return <Portal element={element} appendTo={props.appendTo} visible={props.visible} />
+    return <Portal element={element} appendTo={getPropValue('appendTo')} visible={getPropValue('visible')} />
 }));
 
 ConfirmPopup.defaultProps = {
     __TYPE: 'ConfirmPopup',
+    tagKey: undefined,
     target: null,
     visible: false,
     message: null,
diff --git a/pages/confirmdialog/index.js b/pages/confirmdialog/index.js
index 93541164e8..914d36c636 100644
--- a/pages/confirmdialog/index.js
+++ b/pages/confirmdialog/index.js
@@ -69,6 +69,8 @@ const ConfirmDialogDemo = () => {
                 <Toast ref={toast} />
 
                 <div className="card">
+                    <ConfirmDialog />
+
                     <h5>Basic</h5>
                     <Button onClick={confirm1} icon="pi pi-check" label="Confirm" className="mr-2"></Button>
                     <Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
diff --git a/pages/confirmpopup/index.js b/pages/confirmpopup/index.js
index d67a215fa7..0c66209e62 100644
--- a/pages/confirmpopup/index.js
+++ b/pages/confirmpopup/index.js
@@ -59,6 +59,8 @@ const ConfirmPopupDemo = () => {
                 <Toast ref={toast} />
 
                 <div className="card">
+                    <ConfirmPopup />
+
                     <h5>Basic</h5>
                     <Button onClick={confirm1} icon="pi pi-check" label="Confirm" className="mr-2"></Button>
                     <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger p-button-outlined"></Button>