😮解决弹窗位置不对劲的问题
This commit is contained in:
parent
ad4e061846
commit
bcd746130a
@ -7,6 +7,7 @@
|
||||
<link rel="stylesheet" href="./static/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="random-article" class="random-article"></div>
|
||||
<div id="articles-container" class="articles-container"></div>
|
||||
<button id="load-more-btn">显示更多</button>
|
||||
|
||||
|
||||
@ -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();
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
@ -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; /* 内边距 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user