1、需求
- 点击图片出现弹窗,内容为图片;
- 点击弹窗任意地方可关闭弹窗。
2、效果
![](https://img-blog.csdnimg.cn/direct/7367b467d0d5401c809aec1d972b1198.gif)
3、代码
html代码
<div class="slider_container_full">
<ul class="multicolumn-list_full" id="Slider-ul-full">
<li class="grid__item_features_full">
<div class="full_li">
<img
class="multicolumn-card__image_full"
src="../assets/0001.jpeg"
alt="Image Alt"
/>
</div>
<div class="features_text_full">
<h3>海贼王</h3>
<div class="rte">火拳艾斯</div>
</div>
</li>
<li class="grid__item_features_full">
<div class="full_li">
<img
class="multicolumn-card__image_full"
src="../assets/0003.jpg"
alt="Image Alt"
/>
</div>
<div class="features_text_full">
<h3>海贼王</h3>
<div class="rte">蒙奇·D·路飞</div>
</div>
</li>
<!-- 更多LI标签 -->
</ul>
</div>
css代码
ul#Slider-ul-full {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.grid__item_features_full {
width: 300px;
list-style: none;
text-align: center;
}
.full_li {
text-align: center;
}
.multicolumn-card__image_full {
width: 100%;
height: auto;
}
.features_text_full h3 {
margin: 0;
padding: 0;
}
.features_text_full .rte {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
text-overflow: ellipsis;
}
.features_text_full .rte.expanded {
-webkit-line-clamp: inherit; /* 设置为inherit以继承父元素的属性,或者直接移除这个属性 */
overflow: visible;
text-overflow: clip; /* 或者使用clip来避免省略号 */
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
overflow: auto;
text-align: center;
}
.modal-content img {
max-width: 80%;
height: auto;
}
js代码
document.addEventListener("DOMContentLoaded", function () {
// 获取所有LI标签
const lis = document.querySelectorAll(".full_li");
// 创建模态框覆盖层
const modalOverlay = document.createElement("div");
modalOverlay.className = "modal-overlay";
// 创建模态框内容
const modalContent = document.createElement("div");
modalContent.className = "modal-content";
// 找到.rte元素并添加.expanded类来展开文本
const rteElement = modalContent.querySelector(".rte");
if (rteElement) {
rteElement.classList.add("expanded");
}
// 为每个LI标签添加点击事件监听器
lis.forEach((li) => {
li.addEventListener("click", function () {
// 设置模态框内容
modalContent.innerHTML = li.innerHTML;
// 添加模态框到覆盖层
modalOverlay.appendChild(modalContent);
// 显示覆盖层
document.body.appendChild(modalOverlay);
modalOverlay.style.display = "flex";
// 点击覆盖层关闭模态框
modalOverlay.addEventListener("click", function () {
modalOverlay.style.display = "none";
modalOverlay.removeChild(modalContent);
document.body.removeChild(modalOverlay);
});
});
});
});