diff --git a/web/static/app.js b/web/static/app.js
index 9a87195..0ba1f55 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -8,17 +8,15 @@ var refreshTimer = null;
 document.addEventListener('DOMContentLoaded', function() {
     loadConfig();
     refreshAll();
-    
-    // 点击模态框背景关闭
-    document.querySelectorAll('.modal').forEach(function(modal) {
-        modal.addEventListener('click', function(e) {
-            if (e.target === modal) {
-                modal.classList.remove('active');
-            }
-        });
-    });
 });
 
+// 点击模态框背景关闭
+function closeModalOnBackground(event, modalId) {
+    if (event.target.id === modalId) {
+        document.getElementById(modalId).classList.remove('active');
+    }
+}
+
 function loadConfig() {
     fetch(API_BASE + '/api/config')
         .then(function(res) { return res.json(); })
diff --git a/web/static/index.html b/web/static/index.html
index 58abf50..fd7d64d 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -156,8 +156,8 @@
         </div>
 
         <!-- 图片详情模态框 -->
-        <div class="modal" id="image-modal">
-            <div class="modal-content">
+        <div class="modal" id="image-modal" onclick="closeModalOnBackground(event, 'image-modal')">
+            <div class="modal-content" onclick="event.stopPropagation()">
                 <span class="modal-close" onclick="closeImageModal()">×</span>
                 <img id="modal-image" src="" alt="图片详情">
                 <div class="modal-info">
@@ -177,4 +177,4 @@
 
     <script src="/static/app.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>ml>
\ No newline at end of file