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>
Related
I have two modal windows. The first one works correctly, the problem is in the second one, when I click the second <<open modal>>, it doesn't work. How can I make it so that when you click on the second modal, it starts working. while having only 1 block with id on the site.
this is html code with css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<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>
<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>
<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>
I tried many options, but each had some kind of jamb, I tried other scripts, for example, in one the text was not shown at all.
try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="openModal1">Open Modal</button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<button id="openModal2">Open Modal</button>
<!-- The Modal -->
<div id="myModal2" 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 modal1 = document.getElementById("myModal1");
var modal2 = document.getElementById("myModal1");
// When the user clicks the button, open the modal
document.getElementById("openModal1").onclick = function() {
modal1.style.display = "block";
}
// When the user clicks the button, open the modal
document.getElementById("openModal2").onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
document.getElementsByClassName("close")[0].onclick = function() {
modal1.style.display = "none";
}
document.getElementsByClassName("close")[1].onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1 || event.target == modal2) {
modal1.style.display = "none";
modal2.style.display = "none";
}
}
</script>
</body>
</html>
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>
I have one button, after clicking that button modal will be appear on the page , but this is only working for single button. I want to create multiple buttons along with respective modal of the buttons. Now the code is working fine but it works for single button. I just want each button to display different modals . How to do it ? with this code?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<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>
<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>
I hope this will solve your problem dyanmically.Just add new button and pass the modal id into it's modalId attribute.It will do the rest.You don't need any Id for each button.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button class='modal-bttn' modalId='myModal'>Open Modal</button>
<button class='modal-bttn' modalId='myModal1'>Open Modal1</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>
<!-- The Modal1 -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Moda sdfsdfhl..</p>
</div>
</div>
<script>
var modal=null;
[].forEach.call( document.querySelectorAll( '.modal-bttn' ), function ( bttn ) {
bttn.addEventListener( 'click', function () {
var modalId = bttn.getAttribute("modalId");
showModal(modalId);
}, false );
});
[].forEach.call( document.querySelectorAll( '.close' ), function ( bttn ) {
bttn.addEventListener( 'click', function () {
modal.style.display = "none";
}, false );
});
function showModal(modalId){
modal = document.getElementById(modalId);
modal.style.display = "block";
span = modal.children[0].children[0];
}
// 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>
//Add diff id for buttons
<button id="myBtn-1">Open Modal 1</button>
<button id="myBtn-2">Open Modal 2</button>
//Add diff id for models
<div id="myModal-1" class="modal">
//Code
</div>
<div id="myModal-2" class="modal">
//Code
</div>
var modal1 = document.getElementById('myModal-1');
var modal2 = document.getElementById('myModal-2');
myBtn-1.onclick = function() {
modal1.style.display = "block";
}
myBtn-2.onclick = function() {
modal2.style.display = "block";
}
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>
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>