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>

The first image is showing popup, not others

I am listing posts on the homepage. There are images attached to every post. When someone clicks on the image, it pops up a message. The first image works fine, but others do not.
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
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";
}
}
<div id="myBtn" class="text">
<p>get access</p>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Please login</p>
</div>
</div>
I have researched on StackOverflow and learned that in HTML there will be no same name ID element. I don't know how to implement the right codes.

You can use the querySelectorAll to get more than one element that matches that selector.
you can use valid selectors including by id, tag name, attributes, classes, and more.
you get back an array of DOM elements, so you need to use forEach to set each and every button on its own.
var modal = document.getElementById('myModal');
var btns = document.querySelectorAll('.access-btn');
var span = document.getElementsByClassName("close")[0];
btns.forEach((btn) => {
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";
}
}
.access-btn {
cursor: pointer;
text-transform: uppercase;
}
.modal {
background: grey;
border-radius: 5px;
padding: 10px;
margin: 10px;
position: relative;
}
.close {
cursor: pointer;
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Please login</p>
</div>
</div>
<button id="myBtn" class="text access-btn">
<p>get access</p>
</button>
<button id="myBtn" class="text access-btn">
<p>2nd access</p>
</button>
<button id="myBtn" class="text access-btn">
<p>3rd access</p>
</button>

How to trigger a second button to open another modal

I am pretty much new to the coding world, specially when it comes to using JS or jQuery.
I have found online how to open a modal to display information. I am currently working on a page where, when you click on an image, it displays a modal with the information of the product.
I have been able to make one button work displaying information, but when I trigger the second button, it makes both buttons display the same information.
I can't see where I'm going wrong.
Here is the code I'm using.
// 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";
}
}
// Get the modal
var modal = document.getElementById('mymodalTWO');
// Get the button that opens the modal
var btn = document.getElementById("modaltwo");
// 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";
}
}
.boton {
border: solid 3px black;
padding: 3px 6px;
}
.productname {
font-size: 20px;
}
.imagedesktop {
width: 45%;
float: left;
}
/* 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%;
margin-top: 110px;
height: 680px;
}
/* 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>
<!-- Trigger/Open The Modal -->
<button id="modaltwo">Open Modal Two</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt</h2>
<div>
<img src="https://i3.cpcache.com/product/178522355/funny_choir_womens_dark_tshirt.jpg?width=550&height=550&Filters=%5B%7B%22name%22%3A%22background%22%2C%22value%22%3A%22F2F2F2%22%2C%22sequence%22%3A2%7D%5D" class="imagedesktop" />
</div>
<div>
<p>This is the first modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW</span>
</div>
</div>
</div>
<!-- The Modal TWO-->
<div id="mymodalTWO" class="modal">
<!-- Modal content TWO-->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt TWO</h2>
<div>
<img src="https://cdn.shopify.com/s/files/1/1391/7881/products/spiderman_homecoming_shirt_front_1024x1024.jpg?v=1500006303" class="imagedesktop" />
</div>
<div>
<p>This is the second modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW!</span>
</div>
</div>
</div>

You are using same variable names for both modals. you need to change variable names in order to store different information in it.
As you mentioned that you are beginner in JS, you should read more about scoping, this post will help you.
// 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";
}
}
// Get the modal
var modal2 = document.getElementById('mymodalTWO');
// Get the button that opens the modal
var btn2 = document.getElementById("modaltwo");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal || event.target == modal2) {
modal.style.display = "none";
modal2.style.display = "none";
}
}
.boton {
border: solid 3px black;
padding: 3px 6px;
}
.productname {
font-size: 20px;
}
.imagedesktop {
width: 45%;
float: left;
}
/* 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%;
margin-top: 110px;
height: 680px;
}
/* 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>
<!-- Trigger/Open The Modal -->
<button id="modaltwo">Open Modal Two</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt</h2>
<div>
<img src="https://i3.cpcache.com/product/178522355/funny_choir_womens_dark_tshirt.jpg?width=550&height=550&Filters=%5B%7B%22name%22%3A%22background%22%2C%22value%22%3A%22F2F2F2%22%2C%22sequence%22%3A2%7D%5D" class="imagedesktop" />
</div>
<div>
<p>This is the first modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW</span>
</div>
</div>
</div>
<!-- The Modal TWO-->
<div id="mymodalTWO" class="modal">
<!-- Modal content TWO-->
<div class="modal-content">
<span class="close">×</span>
<h2 class="productname">Tshirt TWO</h2>
<div>
<img src="https://cdn.shopify.com/s/files/1/1391/7881/products/spiderman_homecoming_shirt_front_1024x1024.jpg?v=1500006303" class="imagedesktop" />
</div>
<div>
<p>This is the second modal description.</p>
</div>
<div>
<span class="boton">SHOP NOW!</span>
</div>
</div>
</div>

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.