我不相信这是以前问过的。如果找到我，我很抱歉，找不到它。
我有一个带有图片作为按钮的HTML表：
<td>
<button class="trigger">
<img src="D:\Elly Research\ CO2858\Presentation\Calypso_map.jpg">
</button>
</td>
<div class="modal">
<div class="modal-content">
<span class="close-button">× </span>
<img src="D:\Elly Research\CO2858\Presentation\Calypso_map.jpg">
<script src="D:\Elly Research\CO2858\Presentation\modal.js"></script>
</div>
</div>
这由脚本控制：
var modal = document.querySelector(".modal");
var trigger = document.querySelector (".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if(event.target === modal){
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
如果我复制第一张图片的格式并将其用于同一张表和同一页中的第二张图片，它将停止工作。
JavaScript是否不能像CSS那样工作，在CSS中我可以使用多个ID来控制一个CSS值？
这是我第一次将JavaScript与HTML和CSS结合使用。
最佳答案
我不确定您到底想问什么。根据我的假设，这是一个小片段。希望对您有帮助。
var modal = document.getElementById("modal")
window.addEventListener("click", windowOnClick);
document.querySelector(".close-button").addEventListener("click", toggleModal)
function showImage(event){
toggleModal()
modal.getElementsByTagName("img")[0].src =event.srcElement.src
}
function windowOnClick(event){
if(event.srcElement === modal){
toggleModal()
}
}
function toggleModal(){
modal.classList.toggle("show-modal")
}td > img{
width: 100px;
height: auto;
}
.modal{
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index=10;
}
.show-modal{
display: block !important;
}
.modal-content{
width: 60%;
height: auto;
margin: 0 auto;
}
.close-button{
color: white;
cursor: pointer;
}
#viewer{
width:100%;
height: auto;
}<!doctype>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<img src="https://i.imgur.com/GV6086A.jpg" onclick="showImage(event)" />
</td>
<td>
<img src="https://i.imgur.com/opERcp1.jpg" onclick="showImage(event)" />
</td>
</tr>
<tr>
<td>
<img src="https://i.imgur.com/lieUEvQ.jpg" onclick="showImage(event)" />
</td>
<td>
<img src="https://i.imgur.com/B63gaEQ.jpg" onclick="showImage(event)" />
</td>
</tr>
</table>
<div class="modal" id="modal">
<div class="modal-content">
<span class="close-button">× </span>
<img id="viewer">
</div>
</div>
</body>
</html>