单击背景div时关闭div

<div id="modal" class="modal">
  <div class="modal-content">
    <!-- 弹窗内容 -->
  </div>
</div>

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明的背景颜色 */
  display: none; /* 初始状态下隐藏 */
  justify-content: center;
  align-items: center;
}

.modal-content {
  /* 弹窗内容的样式 */
}

var modal = document.getElementById("modal");
var modalContent = modal.querySelector(".modal-content");

modal.addEventListener("click", function(event) {
  if (event.target === modal || event.target === modalContent) {
    modal.style.display = "none"; // 点击背景div或弹窗内容区域时关闭弹窗
  }
});