diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -2,6 +2,7 @@
 
 import classNames from 'classnames';
 import * as React from 'react';
+import { useState } from 'react';
 
 import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
 import css from './modal.css';
@@ -31,14 +32,26 @@
     withCloseButton = true,
   } = props;
   const overlayRef = React.useRef();
+  const [isBackgroundClick, setIsBackgroundClick] = useState(false);
 
-  const onBackgroundClick = React.useCallback(
+  const onBackgroundMouseDown = React.useCallback(
     event => {
       if (event.target === overlayRef.current) {
+        setIsBackgroundClick(true);
+      } else {
+        setIsBackgroundClick(false);
+      }
+    },
+    [setIsBackgroundClick],
+  );
+
+  const onBackgroundMouseUp = React.useCallback(
+    event => {
+      if (event.target === overlayRef.current && isBackgroundClick === true) {
         onClose();
       }
     },
-    [onClose],
+    [onClose, isBackgroundClick],
   );
 
   const onKeyDown = React.useCallback(
@@ -87,7 +100,8 @@
     <div
       className={css.modalOverlay}
       ref={overlayRef}
-      onClick={onBackgroundClick}
+      onMouseDown={onBackgroundMouseDown}
+      onMouseUp={onBackgroundMouseUp}
       tabIndex={0}
       onKeyDown={onKeyDown}
     >