😮解决弹窗位置不对劲的问题
This commit is contained in:
parent
ad4e061846
commit
bcd746130a
@ -7,6 +7,7 @@
|
|||||||
<link rel="stylesheet" href="./static/styles.css">
|
<link rel="stylesheet" href="./static/styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="random-article" class="random-article"></div>
|
||||||
<div id="articles-container" class="articles-container"></div>
|
<div id="articles-container" class="articles-container"></div>
|
||||||
<button id="load-more-btn">显示更多</button>
|
<button id="load-more-btn">显示更多</button>
|
||||||
|
|
||||||
|
|||||||
@ -82,13 +82,26 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
|
|
||||||
const date = document.createElement('div');
|
const date = document.createElement('div');
|
||||||
date.className = 'modal-article-date';
|
date.className = 'modal-article-date';
|
||||||
date.innerText = article.created.substring(0, 10);
|
date.innerText = "--" + article.created.substring(0, 10);
|
||||||
articleDiv.appendChild(date);
|
articleDiv.appendChild(date);
|
||||||
|
|
||||||
modalArticlesContainer.appendChild(articleDiv);
|
modalArticlesContainer.appendChild(articleDiv);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 设置类名以触发显示动画
|
||||||
modal.style.display = 'block';
|
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) {
|
window.onclick = function(event) {
|
||||||
const modal = document.getElementById('modal');
|
const modal = document.getElementById('modal');
|
||||||
if (event.target === modal) {
|
if (event.target === modal) {
|
||||||
modal.style.display = 'none';
|
hideModal();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|||||||
@ -12,28 +12,40 @@ body {
|
|||||||
|
|
||||||
/* 模态框样式 */
|
/* 模态框样式 */
|
||||||
.modal {
|
.modal {
|
||||||
display: none; /* 默认隐藏 */
|
position: fixed;
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
background-color: rgba(255, 255, 255, 0.7);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(25px); /* 应用高斯模糊效果，可以根据需要调整模糊程度 */
|
||||||
-webkit-backdrop-filter: blur(10px); /* 模糊背景 */
|
-webkit-backdrop-filter: blur(25px); /* 兼容性前缀，适用于一些旧版本的浏览器 */
|
||||||
background-color: rgba(255, 255, 255, 0.5); /* 背景遮罩 */
|
z-index: 999;
|
||||||
|
opacity: 0; /* 初始透明度 */
|
||||||
|
visibility: hidden; /* 初始不可见 */
|
||||||
|
transition: opacity 0.3s; /* 过渡效果，持续时间为 0.3 秒 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-open {
|
||||||
|
opacity: 1; /* 透明度变为完全不透明 */
|
||||||
|
visibility: visible; /* 可见 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background-color: #fefefe;
|
position: absolute;
|
||||||
margin: 50% auto;
|
top: 50%;
|
||||||
padding: 20px;
|
left: 50%;
|
||||||
border: 1px solid #888;
|
transform: translate(-50%, -50%);
|
||||||
width: 320px;
|
width: 320px;
|
||||||
max-width: 600px;
|
/* transform: translate(-50%, -50%); */
|
||||||
border-radius: 8px;
|
background-color: rgba(239, 250, 255, 0.7);
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
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) {
|
@media screen and (max-width: 400px) {
|
||||||
@ -55,11 +67,21 @@ body {
|
|||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
margin: 20px 0;
|
margin: 25px 0;
|
||||||
color: #007BFF;
|
color: #007BFF;
|
||||||
text-decoration: none;
|
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 {
|
#modal-author-name-link:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
@ -69,11 +91,42 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#modal-articles-container {
|
#modal-articles-container {
|
||||||
border-top:#007BFF solid 1px;
|
border-top:#00244b double 2px;
|
||||||
margin-top: 30px;
|
margin-top: 20px;
|
||||||
padding-top: 30px;
|
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 {
|
.articles-container {
|
||||||
@ -137,7 +190,6 @@ body {
|
|||||||
|
|
||||||
.card-author,
|
.card-author,
|
||||||
.card-date {
|
.card-date {
|
||||||
display: inline-block;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #313131;
|
color: #313131;
|
||||||
padding: 5px; /* 内边距 */
|
padding: 5px; /* 内边距 */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user