We Keep Coding

Multiple uses of ID to open pop up box

I've used this tutorial to build a pop up box with a contact form however i want to use this in multiple places without duplicating the code and changing the ID's for each button
any advice would be appreciated if you need anymore information please let me know ill edit the question
here is my site ive added the id to both the slider links
this is my pop up box and button
<button id="myBtn" class="btn btn-light">
click here
</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<?php echo do_shortcode('[wpforms id="439"]'); ?>
</div>
here is my javascript
// 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 on 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";
}
}

Hello thank you for question
Try below code once. Here you find for multiple modals working finely
// Get the modal
function openModal(modal)
{
var modal = document.getElementById(modal);
modal.style.display = "block";
var span = document.querySelector("#"+modal.id+" .close");
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* 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: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button onclick="openModal('modal1')">Open Modal 1</button>
<button onclick="openModal('modal2')">Open Modal 2</button>
<!-- The Modal 1 -->
<div id="modal1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal1..</p>
</div>
</div>
<!-- The Modal 2 -->
<div id="modal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal2..</p>
</div>
</div>

modal disappear when mouse out in javascript

when i mouseover on button ,modal should appear.When i try to select any values inside the modal ,modal immediately disappears.
<button class="modalShow" onMouseOver={this.showModal} onMouseOut={this.closeModal} >
Show Modal
</button>
<div class="modal modalView" id="myModal" >
<div class="modalDialog modalClass">
<div class="modalContent">
<div class="header">
<ul class="drop">
<li>
<input type="radio" id="first" name="first" value="1" />
<label>first</label>
</li>
<li>
<input type="radio" id="second" name="second" value="2" />
<label>second</label>
</li>
</ul>
</div>
</div>
</div>
</div>
showModal= event => {
document.getElementById("myModal").style.display = "block";
/* logic***/
}
close modal function on button mouseout .
closeModal= event => {
document.getElementById("myModal").style.display = "none";
}

Your question is not clear.So anybody dont understand what did you ask.But i prepare a solution for you even so.May be this sample is enough for you.
This code has 2 options :
opening modal with pressing a button.
and When selecting anywhere on modal , modal will close.
You can check it :
// 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";
}
function closeModal() {
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";
}
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* 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: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div onClick="closeModal()" class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>

Is it possible to implement a modal with a list tag? Or would I have to use a button?

I am making a personal portfolio website for myself.
<footer>
<ul class="icons">
<li>GitHub</li>
<li>Resume</li>
<li> Contact</li>
</ul>
</footer>
In the code that is above, would it be possible to include a modal for the contact button? I have created a "contact.html" page and would like it to pop-up when the button is clicked rather than have a whole new page open up.
Or would I have to use the button tag instead of the tag?
I am comfortable with using Bootstrap and can implement a modal with that framework if necessary.

You can Use this custom modal or bootstrap modal https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
// 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";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* 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: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>

You can use this model:
<html>
<head>
<title>
modal
</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* 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: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="icons">
<li>GitHub</li>
<li>Resume</li>
<li> Contact</li>
</ul>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var contact = document.getElementById("contact");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
contact.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>

Using two modals

I'm sure this is a really simple issue but I'm having trouble opening two modal windows with javascript.
Desired effect would be for each button to open their own modal
JS FIDDLE
HTML
<!-- Modal 1 -->
<div id="myModal-1" class="modal">
<div class="modal-content">
<div class="box-content">
<h2>Modal 1</h2>
<span class="close">×</span>
</div>
</div>
</div>
<!-- Modal 2 -->
<div id="myModal-2" class="modal">
<div class="modal-content">
<div class="box-content">
<h2>Modal 2</h2>
<span class="close">×</span>
</div>
</div>
</div>
<button id="modalBtn-1">Modal 1</button>
<button id="modalBtn-2">Modal 2</button>
JS
// Get the modal 1
var modal = document.getElementById('myModal-1');
var btn = document.getElementById("modalBtn-1");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

The issue you were having was the second functions were overwriting the events for the first one.
If you had to do more than 2 modals you may want to consider modifying functions to be more universal
// Get the modal
var modal = document.getElementById('myModal-1');
// Get the button that opens the modal
var btn = document.getElementById("modalBtn-1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on 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";
}
}
// Get the modal
var modal = document.getElementById('myModal-2');
// Get the button that opens the modal
var btn = document.getElementById("modalBtn-2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on 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";
}
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
margin: 10% auto; /* 15% from the top and centered */
max-width: 800px; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.box-content {
background: #fff;
margin: 0px 20px;
height: 100px;
}
h2 {
float: left;
}
<!-- Modal 1 -->
<div id="myModal-1" class="modal">
<div class="modal-content">
<div class="box-content">
<h2>Modal 1</h2>
<span class="close">×</span>
</div>
</div>
</div>
<!-- Modal 2 -->
<div id="myModal-2" class="modal">
<div class="modal-content">
<div class="box-content">
<h2>Modal 2</h2>
<span class="close">×</span>
</div>
</div>
</div>
<button id="modalBtn-1">Modal 1</button>
<button id="modalBtn-2">Modal 2</button>

Multiple modals not working properly

I apologize if this is been answered before but I've been staring at this code for hours and cant figure out why it is behaving the way it is.
I have a page with 3 modal windows on it that I am using javascript to trigger. Now with just one modal window it works fine, however I have tried adding two more windows and the first link for the first window triggers the third modal and then the close function does not work anymore.
Here is my code:
CSS:
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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 */
}
.modal1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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 */
}
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Modal Body */
.modal-body {padding: 2px 16px;}
/* Modal Footer */
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
#keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
</style>
HTML & Javascript:
<!-- Trigger/Open The Modal -->
Open Modal 1
Open Modal 2
Open Modal 3
<!-- modal 1 -->
<script type="text/javascript">
function modalFun(){
// 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 on the button, open the modal
btn.onclick = function() {
console.log(modal);
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";
}
}
// Get the modal
var modal = document.getElementById('myModal1');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
console.log(modal1);
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
// Get the modal
var modal = document.getElementById('myModal2');
// Get the button that opens the modal
var btn = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
console.log(modal2);
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
}
window.onload=modalFun;
</script>
<!-- Modal 1 -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<!-- Modal 1 -->
<!-- Modal 2 -->
<!-- The Modal -->
<div id="myModal1" class="modal1">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header2</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<!-- Modal 2 -->
<!-- Modal 3 -->
<!-- The Modal -->
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header3</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<!-- Modal 3 -->

var span = document.getElementsByClassName("close")[0]; returns the first .close in the document every single time. You need to grab the .close that matches your individual modals. querySelector is a great tool for this. Try
var span = modal.querySelector('.close');
to get the correct one. You're also using .onclick to setup your event handlers. It's better to use addEventListener:
span.addEventListener('click', function() {
modal.style.display = 'none';
});
Also, you're duplicating a lot of code and changing what modal refers to. It'd be better to move that functionality into a function.
function initializeModal(modalID, buttonID) {
// Get the modal element
var modal = document.getElementById(modalID);
// Get the button that opens the modal
var btn = document.getElementById(buttonID);
// Get the <span> element that closes the modal
var span = modal.querySelector('.close');
// When the user clicks on the button, open the modal
btn.addEventListener('click', function() {
modal.style.display = "block";
});
// When the user clicks on <span> (x), close the modal
span.addEventListener('click', function() {
modal.style.display = "none";
});
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
}
Bringing it all together:
function initializeModal(modalID, buttonID) {
// Get the modal element
var modal = document.getElementById(modalID);
// Get the button that opens the modal
var btn = document.getElementById(buttonID);
// Get the <span> element that closes the modal
var span = modal.querySelector('.close');
// When the user clicks on the button, open the modal
btn.addEventListener('click', function() {
modal.style.display = "block";
});
// When the user clicks on <span> (x), close the modal
span.addEventListener('click', function() {
modal.style.display = "none";
});
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
}
window.addEventListener('load', function() {
initializeModal('myModal', 'myBtn');
initializeModal('myModal1', 'myBtn1');
initializeModal('myModal2', 'myBtn2');
});
/* Reuse this class for each modal */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
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/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Modal Body */
.modal-body {
padding: 2px 16px;
}
/* Modal Footer */
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
<!-- Trigger/Open The Modal -->
Open Modal 1
Open Modal 2
Open Modal 3
<!-- Modal 1 -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<!-- Modal 2 -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header2</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<!-- Modal 3 -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header3</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>

You code is not at all correct you are redeclaring the variables with in the same function.
Because of that btn is binded to the last modal at the end of the function
Use different variables like btn,btn1,btn2
Also
var span = document.getElementsByClassName("close")[0];
This will always be binded to the first one you will have to use different ID for the close button too..
I suggest you use bootstrap-modal your code will become much cleaner
This is not a good approach
Here is a working fiddle
https://jsfiddle.net/c9ftdgum/

Hey so i struggled with this for a few days,
I knew my modals worked because they performed as expected when testing on individual webpages.
When i combined all 3 of my modals to one webpage, it all broke. So this is what i found out after days of testing and debugging.
Placement of your MODAL matters!!
Firstly, your buttons for modal triggers can be all placed in one parent div, the modals however should be defined outside that parent div.
EX
<div class="wrapper">
<a class="btn btn-primary btn-sm" role='button'data-bs-toggle="modal" data-bs-target="#modal1">Modal 1</a>
<a class="btn btn-primary btn-sm" role='button'data-bs-toggle="modal" data-bs-target="#modal2">Modal 2</a>
<a class="btn btn-primary btn-sm" role='button'data-bs-toggle="modal" data-bs-target="#modal3">Modal 3</a>
</div>
!! IMPORTANT PART !!
NOW we can define the modals BUT in reverse order of the buttons.
so the first modal we define should be for the last button (#modal3), then the middle buttons modal will be defined (#modal2), and the last modal we will define will be for the first button.
<div class="modal fade" id="modal3" tabindex="-1" aria-hidden="true">
...
</div>
<div class="modal fade" id="modal2" tabindex="-1" aria-hidden="true">
...
</div>
<div class="modal fade" id="modal1" tabindex="-1" aria-hidden="true">
...
</div>
IDK why the order matters but it works.
So if your sure the code for your modal triggers and modal is correct
but the screen fades when you click the modal button,
try this.
Hope it helps someone and saves countless hours of debugging.