Can you have multiple modals on one webpage?

Can you have multiple modals on one webpage? - javascript

I am making a website for an A-Level school project.
I want to have two buttons that each trigger their own modal to pop up. The code for each modal works when separated (ie. the modal shows then button is clicked and closes when x is clicked), however when I put both on the same page the first button (email modal) stops opening the modal.
I used the exact same code for each and only changed the button id and text as well as the div id for each section, so I'm not sure why this has resulted in a change.
<!DOCTYPE html>
<html>
<head>
<title> Business Owner </title>
</head>
<body>
<h1> Business homepage </h1>
<h3>Welcome Back!</h3>
<!--EMAIL POPUP-->
<button id = "btnEmailModal"> Email Inbox</button>
<div id="emailModal" class = "modal">
<span class = "close">×</span>
<div class = "modal-header">
<h2>Email Inbox</h2>
</div>
<div class = "modal-content">
<p>From: subscription#magazine.com<br>To: admin#business.com<br>Subject: New Subscription Successful!!</p>
<p>Dear ###,
Welcome to #########
</p>
</div>
</div>
<script>
var modal = document.getElementById("emailModal"); //calls the modal
var btn = document.getElementById("btnEmailModal"); //calls the modal button
var span = document.getElementsByClassName("close")[0]; //calls the span element that will close the modal
btn.onclick = function(){ //opens the modal when the button is clicked
modal.style.display = "block";
}
span.onclick = function(){
modal.style.display = "none";
}
window.onclick = function(event){
if (event.target == modal){
modal.style.display = "none"
}
}
</script>
<!--BANK POPUP-->
<button id = "btnBankModal"> Bank Account</button>
<div id="bankModal" class = "modal">
<span class = "close">×</span>
<div class = "modal-header">
<h2>Bank Account</h2>
</div>
<div class = "modal-content">
<p>BANK INFO</p>
</div>
</div>
<script>
var modal = document.getElementById("bankModal"); //calls the modal
var btn = document.getElementById("btnBankModal"); //calls the modal button
var span = document.getElementsByClassName("close")[0]; //calls the span element that will close the modal
btn.onclick = function(){ //opens the modal when the button is clicked
modal.style.display = "block";
}
span.onclick = function(){
modal.style.display = "none";
}
window.onclick = function(event){
if (event.target == modal){
modal.style.display = "none"
}
}
</script>
</body>
</html>

You're defining the same variable names in each button click function in the global scope. Javascript is reassigning var modal to look for the element with the bankModal ID for both functions. I recommend looking at or revisiting how scope works in Javascript. You can either rename the variables for the second on click function or wrap each on click in its own function.

Related

Multiple Modal Triggers

I am trying to utilize multiple triggers on a page, to bring up a specific modal each time. The problem I'm having is that it only bring up the last modal i've used. I have set up different names for the modals and buttons, however, the same modal continues to popup, regardless of which button I select and it's always the last one I developed. Below is the html and script I am using for both, any help would be greatly appreciated.
<div class="container-row-two">
<div class="container-Asset">
<button class="btn-Asset" id="myBtn-Asset">
<img class="image-icon" src="Asset.png" alt=""><p>Asset</p>
</button>
</div>
<div class="container-Pros">
<button class="btn-Pros" id="myBtn-Pros">
<img class="image-icon" src="Pros.png" alt=""><p>Pros</p>
</button>
</div>
</div>
<!-- This is the Asset MODAL section -->
<div class="Asset-Modal">
<div id="myModal-Asset" class="modal-Asset">
<!-- Modal Design -->
<div class="modal-content-Asset">
<span class="close-Asset">×</span>
<img class="image-icon-Asset" src="Asset.png" alt="Asset"><p>Asset</p></span>
<div class="modal-content-Asset-info">
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal-Asset");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Asset");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Asset")[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>
</div>
<!-- This is the Pros MODAL section -->
<div class="Pros-Modal">
<div id="myModal-Pros" class="modal-Pros">
<!-- Modal Design -->
<div class="modal-content-Pros">
<span class="close-Pros">×</span>
<img class="image-icon-Pros" src="Pros.png" alt="Asset"><p>Pros</p></span>
<div class="modal-content-Pros-info">
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal-Pros");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Pros");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Pros")[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>

you need named variable diffrent from another, because when the page rendered and you have same name variable, the value of the variable will have the last one
// Get the modal
var modal = document.getElementById("myModal-Asset");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Asset");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Asset")[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("myModal-Pros");
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn-Pros");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close-Pros")[0];
// 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 == modal2) {
modal2.style.display = "none";
}
}
<div class="container-row-two">
<div class="container-Asset">
<button class="btn-Asset" id="myBtn-Asset">
<img class="image-icon" src="Asset.png" alt=""><p>Asset</p>
</button>
</div>
<div class="container-Pros">
<button class="btn-Pros" id="myBtn-Pros">
<img class="image-icon" src="Pros.png" alt=""><p>Pros</p>
</button>
</div>
</div>
<!-- This is the Asset MODAL section -->
<div class="Asset-Modal">
<div id="myModal-Asset" class="modal-Asset">
<!-- Modal Design -->
<div class="modal-content-Asset">
<span class="close-Asset">×</span>
<span><img class="image-icon-Asset" src="Asset.png" alt="Asset"><p>Asset</p></span>
<div class="modal-content-Asset-info"></div>
</div>
</div>
</div>
<!-- This is the Pros MODAL section -->
<div class="Pros-Modal">
<div id="myModal-Pros" class="modal-Pros">
<!-- Modal Design -->
<div class="modal-content-Pros">
<span class="close-Pros">×</span>
<span><img class="image-icon-Pros" src="Pros.png" alt="Asset"><p>Pros</p></span>
<div class="modal-content-Pros-info"> </div>
</div>
</div>
</div>

Modals only showing last button content on multiple buttons

I'm new to coding and am hoping to create three buttons opening three different modals—-so far I've only been about to get the content of the last button to show up for all three (when I comment it out, the second button works for the first two buttons, and when that is commented out, the first works for the first button). I've tried changing the divs to classes to no avail. Any help would be appreciated!
HTML:
<!--First Button-->
<div class="btn">
<button id="btn-name">
<h1>NAME</h1>
</button>
</div>
<br>
<div class="btn">
<button id="btn-news">
<h1>NEWS</h1>
</button>
</div>
<br>
<div class="btn">
<button id="btn-cv">
<h1>CV</h1>
</button>
</div>
<!-- The Modal -->
<div id="modal1" class="modal1">
<!-- Modal content -->
<div class="modal1-content">
<span class="close1">×</span>
<h4>ONE</h4>
<h4>CONTACT</h4>
<p>. . .</p>
</div>
</div>
<!--Second Button-->
<!-- The Modal -->
<div id="modal2" class="modal2">
<!-- Modal content -->
<div class="modal2-content">
<span class="close2">×</span>
<h4>TWO</h4>
<h4>CURRENTLY</h4>
</div>
</div>
<!--Third Button-->
<!-- The Modal -->
<div id="modal3" class="modal3">
<!-- Modal content -->
<div class="modal3-content">
<span class="close3">×</span>
<h4>THREE</h4>
<h4>EDUCATION</h4>
</div>
</div>
JS:
<script>
// Get the modal
var modal = document.getElementById("modal1");
// Get the button that opens the modal
var btn = document.getElementById("btn-name");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[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>
<!--Second Button-->
<script>
// Get the modal
var modal = document.getElementById("modal2");
// Get the button that opens the modal
var btn = document.getElementById("btn-news");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[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>
<!--Third Button-->
<script>
// Get the modal
var modal = document.getElementById("modal3");
// Get the button that opens the modal
var btn = document.getElementById("btn-cv");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close3")[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>
I'm guessing there is a lot of redundancy in this code. . .
Optimistically,
JTE

The problem with your code is you declared the var modal and var btn with the same name for your 3 modal and button.
Using multiple <script></script> does not mean they are separated from other codes.
Try declared with with different name.
Sample Code:
<script>
// Get the modal
var modal1 = document.getElementById("modal1");
// Get the button that opens the modal
var btn1 = document.getElementById("btn-name");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.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";
}
}
</script>
<!--Second Button-->
<script>
// Get the modal
var modal2 = document.getElementById("modal2");
// Get the button that opens the modal
var btn2 = document.getElementById("btn-news");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];
// 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 == modal2) {
modal2.style.display = "none";
}
}
</script>
<!--Third Button-->
<script>
// Get the modal
var modal3 = document.getElementById("modal3");
// Get the button that opens the modal
var btn3 = document.getElementById("btn-cv");
// Get the <span> element that closes the modal
var span3 = document.getElementsByClassName("close3")[0];
// When the user clicks the button, open the modal
btn3.onclick = function() {
modal3.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span3.onclick = function() {
modal3.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal3) {
modal3.style.display = "none";
}
}
</script>
Also if you have this kind of Code. Just use one <script></script> only.

My modal doesn't close when clicking outside

My modal doesn't close when clicking outside. My javascript is fine, so I think my problem is with my html, so if anyone could help find where I messed up I am very grateful.
I tried to change both to see if something works but I wasn't lucky.
// 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";
}
}
<header>
<div class="container1">
<div id="branding">
<img src="image/logo.png">
</div>
<nav>
<ul>
<li>HOME
</li>
<button id="myBtn" class="button">ABOUT US</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Welcome</h2>
s
</div>
<div class="modal-body">
<p>We are a New York based salon and spa, stablished in 1991. We have the best professionals to meet your needs.</p>
</div>
<div class="modal-footer">
<img id="img" src="image/logo3.png">
</div>
</div>
</div>
</ul>
</nav>
</div>
</header>

Ok I kinda fixed, just my first button (about us) is working, I did a copy o the script and added a number like so.
// 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";
}
}
// Get the modal
var modal2 = 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("close2")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
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";
}
}

You need to apply a "Close" background,
It will display (hide and show ) with modal events only.
Check below code :
// Get the modal
var modal = document.getElementById('myModal');
var modalBG = document.getElementById('myModalClose');
// 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";
modalBG.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
modalBG.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";
modalBG.style.display = "none";
}
}
.close{
display:none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
filter: alpha(opacity=50);
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav>
<ul>
<li>HOME</li>
<li><button id="myBtn" class="button">ABOUT US</button></div>
</ul>
</nav>
<div id="myModalClose" class="close">sa</div>
<div id="myModal" class="modal" style="width:300px">
<div class="modal-content">
<div class="modal-header">
<h2>Welcome</h2>
</div>
<div class="modal-body">
<p>We are a New York based salon and spa, stablished in 1991. We have the best professionals to meet your needs.</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
Now user clicks on light black background, the model and that background will be disappeared.

Second modal is preventing the close button from working all modals?

I'm having this issue where I have two modals and was going to add a third one, each opens up correctly when the button is clicked on but neither of them close when the "X" is clicked. If I click off the screen it automatically closes. Can't figure out why it's doing that since both have separate ids. If I remove the Second Modal JS code it works fine, but then I can't open the second modal window.
Here is the HTML:
<div id="generic_price_table">
<div>
<div class="row-2 clearfix">
<div class="col-1-2">
<div class="generic_content clearfix">
<div class="generic_head_price clearfix">
<div class="generic_head_content clearfix">
<div class="head_bg"></div>
<div class="head">
<span></span>
</div>
</div>
<div class="generic_price_tag clearfix">
</div>
</div>
<div class="generic_feature_list">
<ul>
</ul>
</div>
<div class="generic_price_btn clearfix">
<a id="myBtn" class="" href="javascript:void(0)">Register</a>
</div>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h1>Register</h1>
<p><strong>Select one of the below options to Start a Team, Join a Team, or Register as an Individual. </strong></p>
<p>
<a class="modalReg" id="StartTeamBTN" href="">Start a Team</a> <br />
<a class="modalReg" id="JoinTeamBTN" href="">Join a Team</a> <br />
<a class="modalRegRight" id="RegisterIndividualBTN" href="">Register as an Individual</a> <br />
</p>
</div>
</div>
<div class="col-1-2">
<div class="generic_content clearfix">
<div class="generic_head_price clearfix">
<div class="generic_head_content clearfix">
<div class="head_bg"></div>
<div class="head">
<span></span>
</div>
</div>
<div class="generic_price_tag clearfix">
</div>
</div>
<div class="generic_feature_list">
<ul>
</ul>
</div>
<div class="generic_price_btn clearfix">
<a id="myBtn_2" class="" href="javascript:void(0)">Register</a>
</div>
</div>
</div>
</div>
</div>
<div id="myModal_2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h1>Register</h1>
<p><strong>Select one of the below options to Start a Team, Join a Team, or Register as an Individual. </strong></p>
<p>
<a class="modalReg" id="StartTeamBTN" href="">Start a Team</a> <br />
<a class="modalReg" id="">Join a Team</a> <br />
<a class="modalRegRight" id="">Register as an Individual</a> <br />
</p>
</div>
</div>
</div>
And this the js that I'm using from W3S:
<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";
}
}
// Get the second modal
var modal = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn = document.getElementById("myBtn_2");
// 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>
here it is in jsbin: JSBIN LINK
Really appreciate any suggestions/help!
Thank you

There are a few issues with your code:
you're using same variable names for both modals this leads to your 1st modal variables (btn and modal) to be overwritten by 2nd modal variables. So your 1st button opens 2nd modal
you use 1st modal close button (document.getElementsByClassName("close")[0]) as selector for your 2nd span close button so it attempts to close 1st modal instead of 2nd
same thing with closing modal on window.onclick. it closes 2nd modal (see #1 above) not 1st one. there's a conflict between your onclick functions
You can try this as a quick fix:
Working demo: https://jsfiddle.net/9nv3vqdd/1/
// Get the modal
var modal1 = document.getElementById('myModal');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.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 second modal
var modal2 = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_2");
// 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 == modal2) {
modal2.style.display = "none";
}
}
// Get the modal
var modal1 = document.getElementById('myModal');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
// Get the second modal
var modal2 = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_2");
// 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 == modal1) || (event.target == modal2)) {
event.target.style.display = "none";
}
}
Working demo: https://jsfiddle.net/9nv3vqdd/1/

In your js file, change your secondary modal id names and make them unique.
// Get the second modal
var modal2 = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_2");
// 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() {
console.log('here');
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) {
modal.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
}

Buttons are opening the same modal

I am using 2 modals on my page. I open these modals with a buttons:
<button type="button" id="myBtn1">Modal 1</button>
<button type="button" id="myBtn2">Modal 2</button>
When I click on the buttons the buttons are opening the same modal. How can I fix that?
Here are the modals
Modal1:
<div id="myModal1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="row">
<div class="">
<div class="x_content">
<p>content modal 1</p>
</div>
</div>
</div>
</div>
</div>
Modal2:
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="row">
<div class="">
<div class="x_content">
<p>content modal 2</p>
</div>
</div>
</div>
</div>
</div>
Script Modal 1:
<script>
// 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 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>
Script Modal 2:
<script>
// 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 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>

You should put private function
(function(){
// 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 = modal.getElementsByClassName("close")[0];//<<<<pay attention here
...
}());

dont var the same name for modal and btn.
try
// Get the modal
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
// Get the modal
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn2");

You're better off actually assigning the elements per btn.onclick. You're calling the global variable modal, which will use the most recently assigned value.
// for first script
btn.onclick = function() {
document.getElementById("myModal1").style.display = "block";
}
// for second script
btn.onclick = function() {
document.getElementById("myModal2").style.display = "block";
}

Develop Reference

JavaScript is the programming language of the Web.

Can you have multiple modals on one webpage? - javascript

Related

Multiple Modal Triggers

Modals only showing last button content on multiple buttons

My modal doesn't close when clicking outside

Second modal is preventing the close button from working all modals?

Buttons are opening the same modal

Categories

Resources