😮解决弹窗位置不对劲的问题

static/script.js

@@ -82,13 +82,26 @@ document.addEventListener("DOMContentLoaded", function () {
 
             const date = document.createElement('div');
             date.className = 'modal-article-date';
-            date.innerText = article.created.substring(0, 10);
+            date.innerText = "--" + article.created.substring(0, 10);
             articleDiv.appendChild(date);
 
             modalArticlesContainer.appendChild(articleDiv);
         });
 
+        // 设置类名以触发显示动画
         modal.style.display = 'block';
+        setTimeout(() => {
+            modal.classList.add('modal-open');
+        }, 10); // 确保显示动画触发
+    }
+
+    // 隐藏模态框的函数
+    function hideModal() {
+        const modal = document.getElementById('modal');
+        modal.classList.remove('modal-open');
+        modal.addEventListener('transitionend', () => {
+            modal.style.display = 'none';
+        }, { once: true });
     }
     
     // 初始加载
@@ -101,7 +114,7 @@ document.addEventListener("DOMContentLoaded", function () {
     window.onclick = function(event) {
         const modal = document.getElementById('modal');
         if (event.target === modal) {
-            modal.style.display = 'none';
+            hideModal();
         }
     };
 });

static/styles.css

@@ -12,28 +12,40 @@ body {
 
 /* 模态框样式 */
 .modal {
-    display: none; /* 默认隐藏 */
-    position: absolute;
-    z-index: 1;
-    left: 0;
+    position: fixed;
     top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px); /* 模糊背景 */
-    background-color: rgba(255, 255, 255, 0.5); /* 背景遮罩 */
+    background-color: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(25px); /* 应用高斯模糊效果，可以根据需要调整模糊程度 */
+    -webkit-backdrop-filter: blur(25px); /* 兼容性前缀，适用于一些旧版本的浏览器 */
+    z-index: 999;
+    opacity: 0; /* 初始透明度 */
+    visibility: hidden; /* 初始不可见 */
+    transition: opacity 0.3s; /* 过渡效果，持续时间为 0.3 秒 */
+}
+
+.modal-open {
+    opacity: 1; /* 透明度变为完全不透明 */
+    visibility: visible; /* 可见 */
 }
 
 .modal-content {
-    background-color: #fefefe;
-    margin: 50% auto;
-    padding: 20px;
-    border: 1px solid #888;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     width: 320px;
-    max-width: 600px;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    /* transform: translate(-50%, -50%); */
+    background-color: rgba(239, 250, 255, 0.7);
+    padding: 20px;
+    border: 1px solid #ccc;
+    z-index: 1000;
+    max-height: 90%;
+    overflow-y: auto;
+    border-radius: 20px;
+    transition: opacity 0.3s; /* 过渡效果，持续时间为 0.3 秒 */
 }
 
 @media screen and (max-width: 400px) {
@@ -55,11 +67,21 @@ body {
     display: block;
     text-align: center;
     font-size: 15px;
-    margin: 20px 0;
+    margin: 25px 0;
     color: #007BFF;
     text-decoration: none;
 }
 
+.modal-article .modal-article-title {
+    font-size: 20px;
+    margin-bottom: 10px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 #modal-author-name-link:hover {
     text-decoration: underline;
 }
@@ -69,11 +91,42 @@ body {
 }
 
 #modal-articles-container {
-    border-top:#007BFF solid 1px;
-    margin-top: 30px;
-    padding-top: 30px; 
+    border-top:#00244b double 2px;
+    margin-top: 20px;
+    padding-top: 10px; 
 }
 
+.modal-article {
+    display: flex;
+    flex-wrap: wrap; /* This property allows the elements to wrap onto multiple lines */
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: #007BFF dashed 1px;
+}
+
+.modal-article .modal-article-title {
+    color: #000000;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 18px;
+    height: 2.5em; /* 两行高度 */
+    width: 100%;
+    margin-bottom: 5px;
+}
+
+.modal-article .modal-article-title:hover {
+    color: #007BFF;
+    text-decoration: underline;
+}
+
+.modal-article .modal-article-date {
+    font-size: 12px;
+    width: 100%;
+    color: #313131;
+    padding: 5px;
+    cursor: default;
+    text-align: right; /* Add this line to align the text to the right */
+}
 /* 其他样式... */
 
 .articles-container {
@@ -137,7 +190,6 @@ body {
 
 .card-author,
 .card-date {
-    display: inline-block;
     font-size: 12px;
     color: #313131;
     padding: 5px; /* 内边距 */