我正在仅使用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}
}
答案 0 :(得分：0)
您必须使模态唯一，以便以后可以选择它们。一种方法是通过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);
这是解决方案之一。