如何不使用onClick函数显示模式

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

#modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#modal h2 {
  margin-top: 0;
}

#close-btn {
  margin-top: 20px;
}

// 获取模态框元素和关闭按钮元素
var modal = document.getElementById('modal');
var closeBtn = document.getElementById('close-btn');

// 显示模态框
function showModal() {
  modal.style.display = 'block';
}

// 隐藏模态框
function hideModal() {
  modal.style.display = 'none';
}

// 添加事件监听器
document.addEventListener('DOMContentLoaded', function() {
  // 当某个元素被点击时，显示模态框
  document.getElementById('show-modal-btn').addEventListener('click', showModal);
  
  // 当关闭按钮被点击时，隐藏模态框
  closeBtn.addEventListener('click', hideModal);
});

<button id="show-modal-btn">显示模态框</button>