如何在用户单击外部时关闭非模态

// 监听用户点击事件
document.addEventListener('click', function(event) {
  var dialog = document.getElementById('non-modal-dialog'); // 获取非模态对话框的DOM元素
  var dialogRect = dialog.getBoundingClientRect(); // 获取非模态对话框的位置和尺寸信息

  var clickX = event.clientX; // 获取用户点击的X坐标位置
  var clickY = event.clientY; // 获取用户点击的Y坐标位置

  // 判断点击位置是否在非模态对话框的范围内
  if (clickX < dialogRect.left || clickX > dialogRect.right || clickY < dialogRect.top || clickY > dialogRect.bottom) {
    // 关闭非模态对话框
    dialog.close(); // 调用对话框的关闭方法
    // 或者 dialog.style.display = 'none'; // 隐藏对话框的DOM元素
    // 或者 dialog.parentNode.removeChild(dialog); // 移除对话框的DOM元素
  }
});