所以我知道Stackflow上有关于如何做到这一点的答案，就像那两个帖子一样：
但我找不到使用类似代码的答案。
SOO我需要有四个模态框，按钮是图像。所以4中的第一个是工作，但不是其他3.我有一种感觉，我需要修改javascript，但我只是一个网页设计师，我自己学习编码...所以不好看，我需要帮助。
谢谢！
这是代码
/*section employee pop up*/
/* The Modal (background) */
.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: #1a1a1a;
margin: auto;
padding: 20px;
border: 0;
width: 80%;
color: #ffffff;
}
/* The Close Button */
.close {
color: #FFFFFF;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #f1f3f2;
text-decoration: none;
cursor: pointer;
}<!doctype html>
<html>
<head>
</head>
<body>
<!--andre-->
<div class="employee andre">
<!-- Trigger/Open The Modal -->
<button id="myBtn"><img src="http" alt="" class="image"/></button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="text">
<h3>André Lehoux</h3>
<ul>
<li>André has been practicing in Hearst since 2000. He is originally from Hearst, but he lived in Montreal for part of his childhood and completed his university studies at the University of Ottawa.</li>
<li>André has a general practice of law. He has over 20 years of experience practicing law in northern Ontario, including Aboriginal communities on the James Bay coast. He handles cases in criminal and family law, real estate law, wills and estates, civil litigation and commercial and corporate law. André assists victims of crime in obtaining compensation from the CICB and has helped members of aboriginal communities to obtain compensation for physical and psychological abuse in residential schools. Finally, for more than 15 years, André has been a prosecutor for the Ministry of Natural Resources and Forestry for provincial offences related to this department.</li>
<li>André has always been involved in his community to improve the lot of less fortunate and poor people. He sat and served as Chair of the Board of Directors (CA) of La Maison Arc-en-ciel for more than 10 years. Subsequently, he was part of the Notre-Dame Hospital Foundation team from 2007 to 2017. He is currently a member of the Board of Directors of the Grand-Nord Legal Clinic.</li>
<li>André obtained his Bachelor of Business Administration from the University of Ottawa in 1991 and subsequently obtained his law degree in 1994. He did his articling practice in David Lanthier's law office in Cochrane 1995 and he was called to the bar in 1996. After working for a few years in Cochrane, he returned to his hometown.</li>
<li>André is a member of the AJEFO as well as the Cochrane Law Association.</li>
<li>Finally, when André does not work, he enjoys the outdoors and the company of his wife, Micheline, and his little Chow Chow, Juliet.</li>
</ul>
</div>
</div>
</div>
<div class="teamInfo">
<h3>André Lehoux</h3>
<h4>Lawyer</h4>
<h5><a href="mailto:aclehoux@ntl.sympatico.ca">aclehoux@ntl.sympatico.ca</a></h5>
</div>
</div>
<!--karine-->
<div class="employee karine">
<!-- Trigger/Open The Modal -->
<button id="myBtn"><img src="../images/karineBrochuPale.jpg" alt="" class="image"/></button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Karine Brochu</h3>
<ul>
<li>Karine was born and raised in Hearst. She has been working at the firm as a legal assistant since 2013.</li>
<li>Karine works along side Mr. Lehoux in order to assist him with criminal matters and wills. Karine is the receptionist and real estate law clerk. She can assist you in both official languages.</li>
</ul>
</div>
</div>
<div class="teamInfo">
<h3>Karine Brochu</h3>
<h4>Legal/administrative assistant</h4>
<h5><a href="mailto:kbrochu@ntl.sympatico.ca">kbrochu@ntl.sympatico.ca</a></h5>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.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";
}
}
</script>
</body>
</html>
答案 0 :(得分：1)
您仍然需要修复HTML以删除重复的ID（或完全删除它们），但您可以迭代每个employee并添加与周围元素相关联的事件侦听器：
document.querySelectorAll('.employee').forEach((employee) => {
const span = employee.querySelector('.close');
const btn = employee.querySelector('button');
const modal = employee.querySelector('.modal');
btn.onclick = () => modal.style.display = "block";
span.onclick = () => modal.style.display = "none";
});
window.onclick = function(event) {
if (event.target.classList.contains('modal'))
event.target.style.display = "none";
}/*section employee pop up*/
/* The Modal (background) */
.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: #1a1a1a;
margin: auto;
padding: 20px;
border: 0;
width: 80%;
color: #ffffff;
}
/* The Close Button */
.close {
color: #FFFFFF;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #f1f3f2;
text-decoration: none;
cursor: pointer;
}<!--andre-->
<div class="employee andre">
<!-- Trigger/Open The Modal -->
<button id="myBtn"><img src="http" alt="" class="image"/></button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="text">
<h3>André Lehoux</h3>
<ul>
<li>André has been practicing in Hearst since 2000. He is originally from Hearst, but he lived in Montreal for part of his childhood and completed his university studies at the University of Ottawa.</li>
<li>André has a general practice of law. He has over 20 years of experience practicing law in northern Ontario, including Aboriginal communities on the James Bay coast. He handles cases in criminal and family law, real estate law, wills and estates, civil litigation and commercial and corporate law. André assists victims of crime in obtaining compensation from the CICB and has helped members of aboriginal communities to obtain compensation for physical and psychological abuse in residential schools. Finally, for more than 15 years, André has been a prosecutor for the Ministry of Natural Resources and Forestry for provincial offences related to this department.</li>
<li>André has always been involved in his community to improve the lot of less fortunate and poor people. He sat and served as Chair of the Board of Directors (CA) of La Maison Arc-en-ciel for more than 10 years. Subsequently, he was part of the Notre-Dame Hospital Foundation team from 2007 to 2017. He is currently a member of the Board of Directors of the Grand-Nord Legal Clinic.</li>
<li>André obtained his Bachelor of Business Administration from the University of Ottawa in 1991 and subsequently obtained his law degree in 1994. He did his articling practice in David Lanthier's law office in Cochrane 1995 and he was called to the bar in 1996. After working for a few years in Cochrane, he returned to his hometown.</li>
<li>André is a member of the AJEFO as well as the Cochrane Law Association.</li>
<li>Finally, when André does not work, he enjoys the outdoors and the company of his wife, Micheline, and his little Chow Chow, Juliet.</li>
</ul>
</div>
</div>
</div>
<div class="teamInfo">
<h3>André Lehoux</h3>
<h4>Lawyer</h4>
<h5><a href="mailto:aclehoux@ntl.sympatico.ca">aclehoux@ntl.sympatico.ca</a></h5>
</div>
</div>
<!--karine-->
<div class="employee karine">
<!-- Trigger/Open The Modal -->
<button id="myBtn"><img src="../images/karineBrochuPale.jpg" alt="" class="image"/></button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Karine Brochu</h3>
<ul>
<li>Karine was born and raised in Hearst. She has been working at the firm as a legal assistant since 2013.</li>
<li>Karine works along side Mr. Lehoux in order to assist him with criminal matters and wills. Karine is the receptionist and real estate law clerk. She can assist you in both official languages.</li>
</ul>
</div>
</div>
<div class="teamInfo">
<h3>Karine Brochu</h3>
<h4>Legal/administrative assistant</h4>
<h5><a href="mailto:kbrochu@ntl.sympatico.ca">kbrochu@ntl.sympatico.ca</a></h5>
</div>
</div>