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

在一个网页上控制多个模态框，可以通过以下步骤实现：

HTML结构：在网页中创建多个模态框，并为每个模态框设置唯一的ID。可以使用<div>元素来创建模态框，设置id属性来唯一标识每个模态框。
CSS样式：使用CSS样式来隐藏所有模态框，确保它们在页面加载时不可见。可以使用display: none;来隐藏模态框。
JavaScript事件处理：使用JavaScript来控制模态框的显示和隐藏。可以通过以下步骤实现：
a. 获取模态框的引用：使用document.getElementById()方法获取每个模态框的引用，并将其存储在变量中。
b. 触发事件：通过触发事件（例如点击按钮）来显示或隐藏模态框。可以使用addEventListener()方法为触发事件的元素添加事件监听器。
c. 显示模态框：在事件监听器中，使用模态框的引用，将其样式的display属性设置为block，以显示模态框。
d. 隐藏模态框：同样在事件监听器中，使用模态框的引用，将其样式的display属性设置为none，以隐藏模态框。

以下是一个示例代码：

HTML结构：

<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>

CSS样式：

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

JavaScript事件处理：

// 获取模态框的引用
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";
});

这样，当点击"Open Modal 1"按钮时，模态框1将显示出来；当点击"Open Modal 2"按钮时，模态框2将显示出来。点击模态框本身，模态框将隐藏。

请注意，这只是一个基本的示例，你可以根据自己的需求进行修改和扩展。