如何触发第二个按钮打开对应Modal？JS新手问题求助

嘿，作为编程新手遇到这种问题太正常了，我帮你梳理清楚问题根源，再直接给你修正后的代码：

问题出在哪？ #

1. 变量重复覆盖：你两次声明了modal、btn、span这些变量，后面的声明会直接覆盖前面的，导致最后只有第二个按钮和模态框的绑定生效——所以点第一个按钮也会打开第二个模态框。
2. 关闭按钮选择不精准：getElementsByClassName("close")[0]只会获取页面中第一个带close类的元素，第二个模态框的关闭按钮根本没绑定关闭事件。

修正后的完整代码 #

HTML部分

<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">&times;</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"><a href="#">SHOP NOW</a></span>
    </div>
  </div>
</div>

<!-- The Modal TWO-->
<div id="mymodalTWO" class="modal">
  <!-- Modal content TWO-->
  <div class="modal-content">
    <span class="close">&times;</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"><a href="#">SHOP NOW!</a></span>
    </div>
  </div>
</div>

CSS部分

.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;
}

JavaScript部分

// 第一个模态框相关元素
var modal1 = document.getElementById('myModal');
var btn1 = document.getElementById("myBtn");
var span1 = document.querySelector('#myModal .close');

// 打开第一个模态框
btn1.onclick = function() {
  modal1.style.display = "block";
}

// 关闭第一个模态框
span1.onclick = function() {
  modal1.style.display = "none";
}

// 第二个模态框相关元素
var modal2 = document.getElementById('mymodalTWO');
var btn2 = document.getElementById("modaltwo");
var span2 = document.querySelector('#mymodalTWO .close');

// 打开第二个模态框
btn2.onclick = function() {
  modal2.style.display = "block";
}

// 关闭第二个模态框
span2.onclick = function() {
  modal2.style.display = "none";
}

// 点击模态框外部关闭对应模态框
window.onclick = function(event) {
  if (event.target == modal1) {
    modal1.style.display = "none";
  }
  if (event.target == modal2) {
    modal2.style.display = "none";
  }
}

关键修正说明 #

• 给每个模态框的变量起了独特名字（modal1/modal2、btn1/btn2、span1/span2），彻底避免变量覆盖问题。
• 用document.querySelector('#模态框ID .close')精准定位每个模态框内的关闭按钮，确保每个按钮都能绑定对应关闭事件。
• 优化了窗口点击关闭逻辑，同时判断点击的是哪个模态框的背景，关闭对应的模态框。

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