From bbc5aea08ca67c312935aac9d414525c19bc72d8 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Tue, 18 Feb 2025 07:27:10 +0800
Subject: [PATCH] Fix the bug when modal show back to top

---
 static/css/components/modal.css    |  2 --
 static/js/managers/ModalManager.js | 10 ++++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index 5b58c4ec..8b102179 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -14,8 +14,6 @@
 
 /* 当模态窗口打开时，禁止body滚动 */
 body.modal-open {
-    overflow: hidden;
-    height: 100vh;
     position: fixed;
     width: 100%;
     padding-right: var(--scrollbar-width, 0px); /* 补偿滚动条消失导致的页面偏移 */
diff --git a/static/js/managers/ModalManager.js b/static/js/managers/ModalManager.js
index 93d639eb..6684657a 100644
--- a/static/js/managers/ModalManager.js
+++ b/static/js/managers/ModalManager.js
@@ -1,6 +1,7 @@
 export class ModalManager {
     constructor() {
         this.modals = new Map();
+        this.scrollPosition = 0;
     }
 
     initialize() {
@@ -81,6 +82,9 @@ export class ModalManager {
             modal.onCloseCallback = onCloseCallback;
         }
 
+        // Store current scroll position before showing modal
+        this.scrollPosition = window.scrollY;
+
         if (id === 'deleteModal') {
             modal.element.classList.add('show');
         } else {
@@ -88,6 +92,7 @@ export class ModalManager {
         }
 
         modal.isOpen = true;
+        document.body.style.top = `-${this.scrollPosition}px`;
         document.body.classList.add('modal-open');
     }
 
@@ -98,6 +103,11 @@ export class ModalManager {
         modal.onClose();
         modal.isOpen = false;
 
+        // Remove fixed positioning and restore scroll position
+        document.body.classList.remove('modal-open');
+        document.body.style.top = '';
+        window.scrollTo(0, this.scrollPosition);
+
         // Execute onClose callback if exists
         if (modal.onCloseCallback) {
             modal.onCloseCallback();