如何在一个网页上控制多个模式框？

<div id="modal1" class="modal">
  <div class="modal-content">
    <h2>Modal 1</h2>
    <p>This is the content of Modal 1.</p>
  </div>
</div>

<div id="modal2" class="modal">
  <div class="modal-content">
    <h2>Modal 2</h2>
    <p>This is the content of Modal 2.</p>
  </div>
</div>

<button id="openModal1">Open Modal 1</button>
<button id="openModal2">Open Modal 2</button>

.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: #fff;
  width: 300px;
  margin: 100px auto;
  padding: 20px;
}

// 获取模态框的引用
var modal1 = document.getElementById("modal1");
var modal2 = document.getElementById("modal2");

// 触发事件显示模态框
document.getElementById("openModal1").addEventListener("click", function() {
  modal1.style.display = "block";
});

document.getElementById("openModal2").addEventListener("click", function() {
  modal2.style.display = "block";
});

// 触发事件隐藏模态框
modal1.addEventListener("click", function() {
  modal1.style.display = "none";
});

modal2.addEventListener("click", function() {
  modal2.style.display = "none";
});