如何:有两个独立的按钮来关闭弹出的模式？

<div id="modal" class="modal">
  <div class="modal-content">
    <!-- 模态框内容 -->
    <h2>模态框标题</h2>
    <p>模态框内容</p>
    <button id="closeButton1">关闭</button>
    <button id="closeButton2">关闭</button>
  </div>
</div>

.modal {
  display: none; /* 初始隐藏模态框 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
}

/* 其他样式省略 */

// 获取模态框元素和关闭按钮元素
var modal = document.getElementById('modal');
var closeButton1 = document.getElementById('closeButton1');
var closeButton2 = document.getElementById('closeButton2');

// 点击按钮时显示/隐藏模态框
closeButton1.addEventListener('click', function() {
  modal.style.display = 'none'; // 隐藏模态框
});

closeButton2.addEventListener('click', function() {
  modal.style.display = 'none'; // 隐藏模态框
});