我正在尝试为我的网站创建多个图像模态，但是我似乎无法调整代码以使其正常工作。任何帮助或建议将不胜感激，因为我仍在学习，这已经困扰了我一段时间:)
HTML：
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
脚本：
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
最佳答案
似乎您想向图库页面添加灯箱效果。灯箱有多个库，例如this one，这很容易实现。
至于您的代码，您仍然可以使它以这种方式工作（css在这里非常重要）：
.gallery-item .caption {
font-size: 8px;
display: none;
}
.gallery {
padding: 0px;
margin: 0 auto;
text-align: center;
}
.gallery-item {
display: inline-block;
padding: 10px;
border: 1px solid salmon;
border-radius: 10px;
background-color: whitesmoke;
text-align: center;
margin: 5px;
max-width: 200px;
box-sizing: border-box;
/* height: 220px; */
vertical-align: middle;
width: 200px;
}
.gallery-item img {
max-width: 165px;
}
#lightbox {
position: fixed;
text-align: center;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
color: white;
font-size: 12px;
display: inline-block;
}
#lightbox img {
height: 85vh;
vertical-align: middle;
vertical-align: middle;
clear: both;
}
#lightbox a {
color: white;
}
#lightbox-close {
float: right;
padding: 5px;
}
#lightbox-prev, #lightbox-next {
float: left;
padding: 5px;
}
#lightbox-contents {
display: inline-block;
}
.hidden {
display: none !important;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lightbox gallery</title>
</head>
<body>
<div id="pic list">
<ul class="gallery">
<li class="gallery-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Doge_homemade_meme.jpg">
<p class="caption">Caption1: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ducimus.</p>
</li>
<li class="gallery-item">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/5/5f/Original_Doge_meme.jpg/300px-Original_Doge_meme.jpg">
<p class="caption">Caption2: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ducimus.</p>
</li>
</ul>
<!-- The Modal -->
<div id="lightbox" class="hidden">
<div id="lightbox-contents">
<!-- The Close Button -->
<div>
<a href="#" id="lightbox-close">Close</a>
<a href="#" id="lightbox-prev">Previous</a>
<a href="#" id="lightbox-next">Next</a>
</div>
<!-- Modal Content (The Image) -->
<div class="lightbox-img">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Doge_homemade_meme.jpg">
<!-- Modal Caption (Image Text) -->
<p class="caption">Caption1: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ducimus.</p>
</div>
</div>
</div>
<script>
//Lightbox
const close = document.getElementById('lightbox-close')
const lightbox = document.getElementById('lightbox')
const galleryItems = document.getElementsByClassName('gallery-item')
const lightboxImg = document.querySelector('.lightbox-img')
close.onclick = function (event) {
event.preventDefault();
lightbox.classList.add('hidden');
}
for (i=0; i<galleryItems.length; i++) {
let items = galleryItems[i]
items.onclick = function (event) {
lightboxImg.innerHTML = items.innerHTML;
lightbox.classList.remove('hidden');
}
}
</script>