单网页多Modal实现故障：首个按钮无法触发弹窗求助

你遇到的问题是全局变量冲突加上元素选择逻辑错误导致的：

1. 两个<script>标签里都用var声明了modal、btn、span这些全局变量，第二个脚本会直接覆盖第一个脚本的同名变量，导致第一个弹窗的关闭逻辑（包括关闭按钮和点击外部区域）被替换成第二个弹窗的逻辑。
2. 你用document.getElementsByClassName("close")[0]总是选中页面里第一个带close类的元素，第二个弹窗的关闭按钮根本没绑定对应的关闭事件，反而第一个弹窗的关闭按钮被重新绑定了关闭第二个弹窗的逻辑。
3. window.onclick事件被第二个脚本覆盖，点击第一个弹窗的外部区域不会关闭它，只有点击第二个弹窗的外部才会生效。

可以用**立即执行函数（IIFE）**把每个弹窗的逻辑包裹起来，形成独立的局部作用域，避免全局变量冲突；同时通过弹窗元素自身查找内部的关闭按钮，确保每个关闭按钮绑定对应弹窗的关闭逻辑。

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
        <title> Business Owner </title>
        <style>
                /* 必须添加modal的基础样式，默认隐藏弹窗 */
                .modal {
                        display: none;
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(0,0,0,0.5);
                }
                .modal-content {
                        background-color: white;
                        margin: 15% auto;
                        padding: 20px;
                        width: 70%;
                }
                .close {
                        float: right;
                        font-size: 28px;
                        font-weight: bold;
                        cursor: pointer;
                }
        </style>
</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>
// 用IIFE包裹，形成局部作用域
(function() {
   var modal = document.getElementById("emailModal");
   var btn = document.getElementById("btnEmailModal");
   // 通过modal自身查找内部的close元素
   var span = modal.querySelector(".close");
   btn.onclick = function(){
        modal.style.display = "block";
   }
   span.onclick = function(){
        modal.style.display = "none";
   }
   window.addEventListener('click', 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>
(function() {
   var modal = document.getElementById("bankModal");
   var btn = document.getElementById("btnBankModal");
   var span = modal.querySelector(".close");
   btn.onclick = function(){
        modal.style.display = "block";
   }
   span.onclick = function(){
        modal.style.display = "none";
   }
   window.addEventListener('click', function(event){
        if (event.target == modal){
                modal.style.display = "none"
        }
   });
})();
</script>
</body>
</html>

• 用IIFE把每个弹窗的JS逻辑包裹，避免全局变量污染和覆盖。
• 用modal.querySelector(".close")替代document.getElementsByClassName("close")[0]，确保每个关闭按钮只对应自己的弹窗。
• 添加了modal的基础CSS样式（你之前可能单独运行时加了样式，现在统一补上，确保弹窗默认隐藏）。
• 改用addEventListener绑定window点击事件，这样不会覆盖之前的事件，多个弹窗的外部点击关闭逻辑都能生效。

内容的提问来源于stack exchange，提问作者am8ture