所以我知道Stackflow上有关于如何做到这一点的答案，比如这两个帖子：
Multiple CSS Modal boxes
Multiple modals
但是我找不到一个和我的代码相似的答案。
所以我需要四个模态框，按钮是一个图像。所以四分之一是有效的，而不是另外三分之一。我有一种感觉，我需要修改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:[email protected]">[email protected]</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:[email protected]">[email protected]</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>最佳答案
您仍然需要修复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:[email protected]">[email protected]</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:[email protected]">[email protected]</a></h5>
</div>
</div>