你能在一个网页上有多个模式吗？

Question

I am making a website for an A-Level school project.我正在为 A-Level 学校项目制作网站。

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.每个模式的代码在分开时工作（即模式显示然后单击按钮并在单击 x 时关闭），但是当我将两者放在同一页面上时，第一个按钮（电子邮件模式）停止打开模式。

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.我对每个部分都使用了完全相同的代码，并且只更改了按钮 ID 和文本以及每个部分的 div ID，所以我不确定为什么会导致更改。

<!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: 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">&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>

Answer 1

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.您在全局 scope 中的每个按钮单击 function 中定义了相同的变量名称。Javascript 正在重新分配var modal以查找具有两个函数的 bankModal ID 的元素。 I recommend looking at or revisiting how scope works in Javascript .我建议查看或重温scope 在 Javascript 中的工作原理。 You can either rename the variables for the second on click function or wrap each on click in its own function.您可以将第二次点击时的变量重命名为 function，或者将每个点击时的变量包装在其自己的 function 中。

你能在一个网页上有多个模式吗？

问题描述

1 个解决方案

解决方案1
2 已采纳 2023-01-11 14:20:53

你能在一个网页上有多个模式吗？

问题描述

1 个解决方案

解决方案1 2 已采纳 2023-01-11 14:20:53

解决方案1
2 已采纳 2023-01-11 14:20:53