mpladesigner
Reputation: 23
Multiple Modal Boxes: no clue about javascript
So I know there's answers on Stackflow about how to do this, like those two posts:
but I can't find an answer that uses similar codes to mine.
SOO I need to have four modal boxes, which the button is an image. So the first out of 4 is working, but not the other 3. I have a feeling that I need to modify the javascript but I'm just a web designer, I learn coding by myself... so not great at it and I need help.
Thanks!
Here's the code
/*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>Upvotes: 2
Views: 112
Answers (1)
CertainPerformance
Reputation: 370829
You still need to fix the HTML to remove the duplicate IDs (or remove them entirely), but you can iterate over each employee and add event listeners linked to the surrounding elements appropriately:
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>Upvotes: 1
Related Questions
- How to create multiple modal in jquery?
- How do I make add more than 1 modal box?
- Creating multiple modals using jquery
- Multiple Modals with same structure on one page
- Only one Modal box pop-up - Javascript
- Using several different modals
- Using two modal boxes with one javascript code
- Multiple Javascript Modals
- Multiple modals on same page
- More than one Modal Boxes on one page