Can you have multiple modals on one webpage?-CodePudding

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">&times;</span>
   <div class = "modal-header">
        <h2>Email Inbox</h2>
   </div>
   <div class = "modal-content">
        <p>From: [email protected]<br>To: [email protected]<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">&times;</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>

CodePudding user response：

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.