🐯美化模态框，解决关闭后模态框无法删除的bug

main/fclite.css

@@ -133,7 +133,7 @@ body {
 }
 
 .modal-content {
-    position: absolute;
+    position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -143,11 +143,17 @@ body {
     border: 1px solid var(--border-color);
     z-index: 1000;
     max-height: 90%;
-    overflow-y: auto;
+    overflow: hidden;
     border-radius: 20px;
     transition: opacity 0.3s;
 }
 
+.modal-content:hover {
+    #modal-bg-avatar {
+        transform: scale(1.1);
+    }
+}
+
 @media screen and (max-width: 440px) {
     .modal-content {
         width: 80%;
@@ -156,13 +162,27 @@ body {
 
 #modal-author-avatar {
     display: block;
-    margin: 0 auto;
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
+    margin: 5px auto !important;
+    border-radius: 50% !important;
+    width: 110px;
+    height: 110px;
     object-fit: cover;
 }
 
+#modal-bg-avatar {
+    position: absolute;
+    filter: blur(5px);
+    z-index: 0;
+    border-radius: 125px 125px 12px 125px !important;
+    margin: 0 !important;
+    width: 250px;
+    height: 250px;
+    right: -20px;
+    bottom: -20px;
+    opacity: 0.2;
+    transition: transform 0.6s ease, bottom 0.3s ease, right 0.3s ease !important; /* 0.3秒的平滑过渡效果 */
+}
+
 #modal-author-name-link {
     display: block;
     text-align: center;
@@ -181,6 +201,8 @@ body {
 }
 
 #modal-articles-container {
+    position: relative;
+    z-index: 1;
     border-top: var(--hover-color) double 2px;
     margin-top: 20px;
     padding-top: 10px;
@@ -278,7 +300,7 @@ body {
     font-size: 12px;
     color: var(--author-color);
     padding: 5px;
-    transition: box-shadow 0.2s;
+    height: 25px;
 }
 
 .card-author:hover {
@@ -293,8 +315,8 @@ body {
     display: flex;
     padding-right: 10px;
     width: fit-content;
-    height: 26px;
     align-items: center;
+    transition: box-shadow 0.2s;
 }
 
 #friend-circle-lite-root .card-author img {
@@ -308,7 +330,7 @@ body {
 .card-date {
     position: absolute;
     z-index: 1;
-    bottom: 5px;
+    bottom: 10px;
     cursor: default;
     right: 10px;
     display: flex;

main/fclite.js

@@ -42,7 +42,7 @@ function initialize_fc_lite() {
             }
         }
 
-        fetch(`${UserConfig.private_api_url}all.json`)
+        fetch(`${UserConfig.private_api_url}all`)
             .then(response => response.json())
             .then(data => {
                 localStorage.setItem(cacheKey, JSON.stringify(data));
@@ -125,7 +125,7 @@ function initialize_fc_lite() {
 
     function showAuthorArticles(author, avatar, link) {
         // 如果不存在，则创建模态框结构
-        if (!document.getElementById('modal')) {
+        if (!document.getElementById('fclite-modal')) {
             const modal = document.createElement('div');
             modal.id = 'modal';
             modal.className = 'modal';
@@ -134,6 +134,7 @@ function initialize_fc_lite() {
                 <img id="modal-author-avatar" src="" alt="">
                 <a id="modal-author-name-link"></a>
                 <div id="modal-articles-container"></div>
+                <img id="modal-bg-avatar" src="" alt="">
             </div>
             `;
             root.appendChild(modal);
@@ -143,10 +144,13 @@ function initialize_fc_lite() {
         const modalArticlesContainer = document.getElementById('modal-articles-container');
         const modalAuthorAvatar = document.getElementById('modal-author-avatar');
         const modalAuthorNameLink = document.getElementById('modal-author-name-link');
+        const modalBgAvatar = document.getElementById('modal-bg-avatar');
 
         modalArticlesContainer.innerHTML = ''; // 清空之前的内容
         modalAuthorAvatar.src = avatar  || UserConfig.error_img; // 使用默认头像
         modalAuthorAvatar.onerror = () => modalAuthorAvatar.src = UserConfig.error_img; // 头像加载失败时使用默认头像
+        modalBgAvatar.src = avatar || UserConfig.error_img; // 使用默认头像
+        modalBgAvatar.onerror = () => modalBgAvatar.src = UserConfig.error_img; // 头像加载失败时使用默认头像
         modalAuthorNameLink.innerText = author;
         modalAuthorNameLink.href = new URL(link).origin;
 
@@ -184,7 +188,7 @@ function initialize_fc_lite() {
         modal.classList.remove('modal-open');
         modal.addEventListener('transitionend', () => {
             modal.style.display = 'none';
-            document.body.removeChild(modal);
+            root.removeChild(modal);
         }, { once: true });
     }