diff --git a/src/config/i18n.js b/src/config/i18n.js
index 89574c7..8f8ed3e 100644
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -623,6 +623,10 @@ export const I18N = {
     zh: `隐藏翻译按钮`,
     en: `Hide Translate Button`,
   },
+  hide_click_away: {
+    zh: `点击外部关闭弹窗`,
+    en: `Click outside to close the pop-up window`,
+  },
   show: {
     zh: `显示`,
     en: `Show`,
diff --git a/src/config/index.js b/src/config/index.js
index a70ab2d..02b8a20 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -388,7 +388,8 @@ export const DEFAULT_TRANBOX_SETTING = {
   tranboxShortcut: DEFAULT_TRANBOX_SHORTCUT,
   btnOffsetX: 10,
   btnOffsetY: 10,
-  hideTranBtn: false,
+  hideTranBtn: false, // 是否隐藏翻译按钮
+  hideClickAway: false, // 是否点击外部关闭弹窗
 };
 
 // 订阅列表
diff --git a/src/views/Options/Tranbox.js b/src/views/Options/Tranbox.js
index 4968001..bf006d4 100644
--- a/src/views/Options/Tranbox.js
+++ b/src/views/Options/Tranbox.js
@@ -50,6 +50,7 @@ export default function Tranbox() {
     btnOffsetX,
     btnOffsetY,
     hideTranBtn = false,
+    hideClickAway = false,
   } = tranboxSetting;
 
   return (
@@ -160,6 +161,18 @@ export default function Tranbox() {
           <MenuItem value={true}>{i18n("hide")}</MenuItem>
         </TextField>
 
+        <TextField
+          select
+          size="small"
+          name="hideClickAway"
+          value={hideClickAway}
+          label={i18n("hide_click_away")}
+          onChange={handleChange}
+        >
+          <MenuItem value={false}>{i18n("disable")}</MenuItem>
+          <MenuItem value={true}>{i18n("enable")}</MenuItem>
+        </TextField>
+
         {!isExt && (
           <ShortcutInput
             value={tranboxShortcut}
diff --git a/src/views/Selection/DraggableResizable.js b/src/views/Selection/DraggableResizable.js
index 1a72476..3b519e3 100644
--- a/src/views/Selection/DraggableResizable.js
+++ b/src/views/Selection/DraggableResizable.js
@@ -148,6 +148,7 @@ export default function DraggableResizable({
   },
   onChangeSize,
   onChangePosition,
+  ...props
 }) {
   const lineWidth = 4;
   const [position, setPosition] = useState(defaultPosition);
@@ -182,6 +183,7 @@ export default function DraggableResizable({
         gridTemplateRows: `${lineWidth * 2}px auto ${lineWidth * 2}px`,
         zIndex: 2147483647,
       }}
+      {...props}
     >
       <Pointer
         direction="TopLeft"
diff --git a/src/views/Selection/TranBox.js b/src/views/Selection/TranBox.js
index 09cd607..fda69a3 100644
--- a/src/views/Selection/TranBox.js
+++ b/src/views/Selection/TranBox.js
@@ -175,6 +175,7 @@ export default function TranBox({
           header={<Header setShowPopup={setShowBox} />}
           onChangeSize={setBoxSize}
           onChangePosition={setBoxPosition}
+          onClick={(e) => e.stopPropagation()}
         >
           <Divider />
           <TranForm
diff --git a/src/views/Selection/index.js b/src/views/Selection/index.js
index 3ba2caa..a24a471 100644
--- a/src/views/Selection/index.js
+++ b/src/views/Selection/index.js
@@ -132,6 +132,18 @@ export default function Slection({
     }
   }, [handleTranbox, contextMenuType]);
 
+  useEffect(() => {
+    if (tranboxSetting.hideClickAway) {
+      const handleHideBox = () => {
+        setShowBox(false);
+      };
+      window.addEventListener("click", handleHideBox);
+      return () => {
+        window.removeEventListener("click", handleHideBox);
+      };
+    }
+  }, [tranboxSetting.hideClickAway]);
+
   return (
     <>
       {showBox && (