启用modal模态框时JavaScript无法正常检测document的offsetHeight

• Bootstrap 模态框默认使用position: fixed定位，脱离常规文档流，其高度不会被纳入document.body.offsetHeight的计算范围，因此你打开模态框后观测到body高度没有变化。
• 你现有的高度检测逻辑仅监听了body元素，没有覆盖模态框本身的高度变化。

方案1：单独监测模态框高度（推荐） #

如果你的需求是获取模态框的高度，或是需要统计包含模态框的总高度，直接对模态框元素做高度检测即可，修改checkH函数代码如下：

function checkH(){
  const bodyHeight = document.body.offsetHeight;
  const modalEle = document.getElementById('myModal');
  // 判断模态框是否处于显示状态（Bootstrap显示模态框时会为元素添加show类名）
  const isModalVisible = modalEle.classList.contains('show');
  const modalHeight = isModalVisible ? modalEle.offsetHeight : 0;
  // 可根据需求选择输出单个高度或总和
  console.log('Body高度：', bodyHeight, ' 模态框高度：', modalHeight, ' 合计高度：', bodyHeight + modalHeight);
}

方案2：修改模态框定位规则（不推荐） #

如果必须让模态框高度被自动计入body高度，可以强制覆盖模态框的定位样式，但会破坏Bootstrap模态框默认的居中、浮动、滚动锁定等交互效果，非必要不建议使用：

#myModal {
  position: absolute !important;
}

内容的提问来源于stack exchange，提问作者Zama