我有一个由12个项目组成的地雷。 Onclick灯箱模块应该会弹出并显示一张或多张图片
无论我做什么，此灯箱模块都不会显示我的“ src”图像。单击时，将弹出带有图像“占位符”的模块，但没有实际图像，所有项目都是这种情况。
我一直在仔细检查，所有图像均已正确链接。 我一直在做一些烦躁不安的事情，在单击例如项目1或2时，有时会显示一张图像-仅它不是正确的图像。相反，当我调查Chrome中的页面时，我注意到项目1实际上显示了名为项目3的图像，但是此时没有任何显示。我只写它，因为它可能表明源问题。
<script>
var modal = document.getElementById("myModal_1");
var btn = document.getElementById("myBtn_1");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_2");
var btn = document.getElementById("myBtn_2");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_3");
var btn = document.getElementById("myBtn_3");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_4");
var btn = document.getElementById("myBtn_4");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_5");
var btn = document.getElementById("myBtn_5");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_6");
var btn = document.getElementById("myBtn_6");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_7");
var btn = document.getElementById("myBtn_7");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_8");
var btn = document.getElementById("myBtn_8");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_9");
var btn = document.getElementById("myBtn_9");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_10");
var btn = document.getElementById("myBtn_10");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_11");
var btn = document.getElementById("myBtn_11");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_12");
var btn = document.getElementById("myBtn_12");
var span = document.getElementsByClassname("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 80vh;
text-align: left;
}
li {
padding-top: 40px;
}
body {
font-family: 'Helvetica Neue';
font-size: 45px;
}
.content {
margin-top: 450px;
}
.Project:hover {
cursor: default;
text-decoration: underline;
}
#year {
margin-right: 50%;
float: right;
}
p {
display: inline-block;
text-align: left;
padding-left:30px;
padding-right:30px;
font-size: 30px;
width: 700px;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0);
background-color: rgba(0,0.4);
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}<div class="content">
<ul style="list-style: none;">
<li class="Project">
<span id="myBtn_1">
Wer Baut Der Stadt
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Identity and Font developed for the lecture series on architecture conducted by No Image in berlin.
</p>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<img src="Images/WER BAUT 2018/Poster 7-11.pdf">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_2">
Hans Oscar Carlsson
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Webpage for curator and critic Hans Oscar Carlsson
</p>
</div>
<div id="myModal_2" class="modal">
<div class="modal-content">
<img src="Images/Newsarticle/_97A0846.jpg" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_3">
Atelier Toer
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Webpage for Atelier Toer
</p>
</div>
<div id="myModal_3" class="modal">
<div class="modal-content">
<img src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_4">
Wer Baut Der Stadt?
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Identity and Font developed for the lecture series on architecture conducted by No Image in berlin in 2018.
</p>
</div>
<div id="myModal_4" class="modal">
<div class="modal-content">
<img class=WerBaut src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_5">
CAFX 2018
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Identity design for Copenhagen Architecture Festival 2018.
</p>
</div>
<div id="myModal_5" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_6">
Mette Riis
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Webpage for artist and researcher Mette Riis.
</p>
</div>
<div id="myModal_6" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_7">
Contagious Tales
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Graduation project,editorial design
</p>
</div>
<div id="myModal_7" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_8">
Foam X Hydra
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Design of exhibition cahier in connection to the exhibition Foam X HYDRA.
</p>
</div>
<div id="myModal_8" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_9">
What Is The News Article?
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Pamphlet with infographics.
</p>
</div>
<div id="myModal_9" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_10">
Money Can No Longer Buy
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Book.
</p>
</div>
<div id="myModal_10" class="modal">
<div class="modal-content">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_11">
Questionnarie on Individuality
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Litography on napkins.
</p>
</div>
<div id="myModal_11" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_12">
Wordshuffler Posters
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Posters.
</p>
</div>
<div id="myModal_12" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
</ul>
</div>