所以我知道 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>最佳答案
您仍然需要修复 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>关于javascript - 多个模态框 : no clue about javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50441396/