我正在使用HTML / CSS / JS创建个人投资组合网站。遵循网格模板here。当用户点击每个article-class（class="modal"元素）时，我已经包含了打开模态框的附加功能。单击打开或单击“X”关闭，由JS处理。只是<body>：
<body>
<main>
<section class="leading">
<p class="leading-bigtext">Big Headline Text</p>
</section>
<section class="cards">
<article id="article1" class="article-class">
<img class="article-img" src="http://placekitten.com/305/205" alt=" " />
<h1 class="article-title">
Article Headline 1
</h1>
</article>
<article id="article2" class="article-class">
<img class="article-img" src="http://placekitten.com/320/220" alt=" " />
<h1 class="article-title">
Article Headline 2
</h1>
</article>
<article id="article3" class="article-class">
<img class="article-img" src="http://placekitten.com/280/250" alt=" " />
<h1 class="article-title">
Article Headline 3
</h1>
</article>
<article id="article4" class="article-class">
<img class="article-img" src="http://placekitten.com/430/240" alt=" " />
<h1 class="article-title">
Article Headline 4
</h1>
</article>
</section>
<!-- ==================== The Modals ==================== -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h1>Article Title 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a href="https://github.com/Don86/microscopy-image-analysis" target="_blank" class="tooltip">
<img src="./assets/GitHub-Mark-120px-plus.png" height="32" width="32"/>
<span class="tooltiptext">Link to Github repo</span>
</a>
</div>
</div>
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h1>Article Title 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div id="myModal3" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h1>Article Title 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div id="myModal4" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h1>Article Title 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</main>
<script>
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
var modal3 = document.getElementById('myModal3');
var modal4 = document.getElementById('myModal4');
// Get the button that opens the modal
var btn = document.getElementById("article1");
var btn2 = document.getElementById("article2");
var btn3 = document.getElementById("article3");
var btn4 = document.getElementById("article4");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
var span3 = document.getElementsByClassName("close")[2];
var span4 = document.getElementsByClassName("close")[3];
// When the user clicks the button, open the modal
btn.onclick = function() {modal.style.display = "block";}
btn2.onclick = function() {modal2.style.display = "block";}
btn3.onclick = function() {modal3.style.display = "block";}
btn4.onclick = function() {modal4.style.display = "block";}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {modal.style.display = "none";}
span2.onclick = function() {modal2.style.display = "none";}
span3.onclick = function() {modal3.style.display = "none";}
span4.onclick = function() {modal4.style.display = "none";}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal3) {
modal3.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal4) {
modal4.style.display = "none";
}
}
</script>
</body>
这是有效的，但<script>部分是丑陋的，因为它包含大量重复的代码。每次我添加一个新的article，我都必须再次复制粘贴相同的代码行。我已经尝试过使用for-loops和map，但我必须没有正确实现，但无论如何它必须在循环中实例化变量（不要反复覆盖同一个变量）。有没有办法更优雅地做到这一点？
完整性的CSS：
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,900i');
header {
display: flex;
align-items: center;
}
@media (min-width: 600px) {
.leading {
display: flex;
align-items: center;
}
}
/* Grid styles */
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 30px;
}
/* generic styles */
body {
font-family: 'Quicksand', sans-serif;
}
/*header class not used*/
header {
padding: 8px;
font-size: 0.5em;
color: white;
background-color: #333;
}
.logo {
height: 50px;
margin-right: 20px;
}
.leading {
height: 200px;
margin-bottom: 30px;
padding: 30px;
color: black;
background-size: cover;
font-family: "Playfair Display"
}
.leading-bigtext {
margin-right: 40px;
font-weight: bold;
font-size: 10vw;
}
@media (min-width: 700px) {
.leading-bigtext {
font-size: 60px;
}
}
.leading-text {
max-width: 900px;
font-size: 1.2em;
line-height: 1.4em;
}
.cards {
max-width: 900px;
margin: 0 auto 30px;
}
article {
cursor: pointer; /* chance cursor to a hand to prompt click-thru */
position: relative;
transition: 0.3s;
font-family: "Playfair Display", serif;
border-style: solid;
border-width: 1px;
border-color: lightgrey;
}
article:hover {
box-shadow: 7px 7px 4px #aaaaaa;
opacity: 0.7;
}
.article-img {
height: 200px;
width: 100%;
object-fit: cover;
}
.article-title {
position: absolute;
bottom: 0;
width: 100%;
padding: 12px;
background-color: rgba(255, 255, 255, 0.8);
}
/* ==================== Modal css ==================== */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
您必须使模态唯一，以便以后能够选择它们。一种方法是通过id。
<div id="modal-window-one" class="modal-window modal"></div>
<div id="modal-window-two" class="modal-window modal"></div>
您需要定义哪个窗口应该打开哪个按钮。一个可能的解决方案是通过data-attributes。
<div class="click-to-open" data-modal="modal-window-one"> //will open modal one
<div class="click-to-open" data-modal="modal-window-two"> //will open modal two
然后 - 事件：
var btn = document.getElementsByClassName("click-to-open");
for (var i = 0; i < btn.length; i++) {
var thisBtn = btn[i];
thisBtn.addEventListener("click", function(){
var modal = document.getElementById(this.dataset.modal);
modal.style.display = "block";
}, false);
这是解决方案之一。