diff --git a/docs/examples/hooks.tsx b/docs/examples/hooks.tsx
index a9d3094..68ad468 100644
--- a/docs/examples/hooks.tsx
+++ b/docs/examples/hooks.tsx
@@ -93,6 +93,18 @@ const App = () => {
         </button>
       </div>
 
+      {/* pauseOnFocusLoss */}
+      <button
+        onClick={() => {
+          notice.open({
+            pauseOnFocusLoss: true,
+            content: `${new Date().toISOString()}`,
+          });
+        }}
+      >
+        pauseOnFocusLoss
+      </button>
+
       {contextHolder}
     </>
   );
diff --git a/src/Notice.tsx b/src/Notice.tsx
index b32c5cf..41542d6 100644
--- a/src/Notice.tsx
+++ b/src/Notice.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
+import usePageActiveStatus from './hooks/usePageActiveStatus';
 import type { NoticeConfig } from './interface';
 
 export interface NoticeProps extends Omit<NoticeConfig, 'onClose'> {
@@ -20,6 +21,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     style,
     className,
     duration = 4.5,
+    pauseOnFocusLoss,
 
     eventKey,
     content,
@@ -34,6 +36,8 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
   } = props;
   const [hovering, setHovering] = React.useState(false);
   const mergedHovering = forcedHovering || hovering;
+  const activeStauts = usePageActiveStatus();
+  const mergedStauts = pauseOnFocusLoss ? activeStauts : true;
 
   // ======================== Close =========================
   const onInternalClose = () => {
@@ -48,7 +52,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
 
   // ======================== Effect ========================
   React.useEffect(() => {
-    if (!mergedHovering && duration > 0) {
+    if (mergedStauts && !mergedHovering && duration > 0) {
       const timeout = setTimeout(() => {
         onInternalClose();
       }, duration * 1000);
@@ -58,7 +62,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [duration, mergedHovering, times]);
+  }, [duration, mergedHovering, times, mergedStauts]);
 
   // ======================== Render ========================
   const noticePrefixCls = `${prefixCls}-notice`;
diff --git a/src/hooks/usePageActiveStatus.tsx b/src/hooks/usePageActiveStatus.tsx
new file mode 100644
index 0000000..c965123
--- /dev/null
+++ b/src/hooks/usePageActiveStatus.tsx
@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+
+export default function usePageActiveStatus() {
+  const [active, setActive] = useState(true);
+
+  useEffect(() => {
+    const onFocus = function () {
+      setActive(true);
+    };
+    const onblur = function () {
+      setActive(false);
+    };
+    const onVisibilitychange = function () {
+      if (document.visibilityState === 'visible') {
+        onFocus();
+      } else {
+        onblur();
+      }
+    };
+    window.addEventListener('focus', onFocus, false);
+    window.addEventListener('blur', onblur, false);
+    document.addEventListener('visibilitychange', onVisibilitychange, false);
+
+    return function () {
+      window.removeEventListener('focus', onFocus, false);
+      window.removeEventListener('blur', onblur, false);
+      window.removeEventListener('visibilitychange', onVisibilitychange, false);
+    };
+  }, []);
+
+  return active;
+}
diff --git a/src/interface.ts b/src/interface.ts
index c1193a0..9608850 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -7,6 +7,7 @@ type NoticeSemanticProps = 'wrapper';
 export interface NoticeConfig {
   content?: React.ReactNode;
   duration?: number | null;
+  pauseOnFocusLoss?: boolean;
   closeIcon?: React.ReactNode;
   closable?: boolean;
   className?: string;