Bootstrap弹窗显示时导航偏移，自定义JS触发类型错误

• 变量名不一致：自定义JS里定义了bodyTag，但后续操作的是未声明的body变量，导致读取body.classList时body为null，触发TypeError。
• 类名判断错误：classList.contains(".modal-open")多了前缀点，正确写法是classList.contains("modal-open")，带点会导致无法匹配到目标类名。
• 执行时机问题：如果这段JS在<body>标签之前加载，document.querySelector("body")会返回null，进而无法读取classList属性。

Bootstrap弹窗给body添加padding-right:17px，是为了抵消弹窗打开时页面滚动条隐藏带来的跳动问题。以下是两种更稳妥的解决方式：

方案一：CSS直接覆盖（推荐） #

无需编写复杂JS，通过CSS优先级覆盖Bootstrap默认样式：

body.modal-open {
  padding-right: 0 !important;
}

如果担心滚动条消失导致页面内容跳动，可额外设置弹窗打开时保留滚动条：

body.modal-open {
  overflow: visible !important;
  padding-right: 0 !important;
}

方案二：修复JS逻辑并监听弹窗事件 #

先修正原弹窗JS的选择器错误（缺少#），再通过弹窗的show.bs.modal/hide.bs.modal事件精准控制body的padding：

修正后的jQuery版本 #

$(document).ready(function () {
    // 修正选择器，添加#
    var url = $("#BetterConnect").attr("src");
    $("#BetterConnect").on("hide.bs.modal", function () {
      $("#BetterConnect").attr("src", "");
      // 弹窗隐藏时恢复body默认padding
      document.body.style.paddingRight = "";
    });
    $("#BetterConnect").on("show.bs.modal", function () {
      $("#BetterConnect").attr("src", url);
      // 弹窗显示时设置body padding为0
      document.body.style.paddingRight = "0";
    });
  });

纯原生JS版本（无需jQuery） #

document.addEventListener('DOMContentLoaded', function() {
  const modal = document.getElementById('BetterConnect');
  const body = document.body;
  const url = modal.getAttribute('src');
  
  // 控制body padding
  modal.addEventListener('show.bs.modal', () => {
    body.style.paddingRight = '0';
  });
  modal.addEventListener('hide.bs.modal', () => {
    body.style.paddingRight = '';
  });
  
  // 同步原弹窗的src重置逻辑
  modal.addEventListener('hide.bs.modal', () => {
    modal.setAttribute('src', '');
  });
  modal.addEventListener('show.bs.modal', () => {
    modal.setAttribute('src', url);
  });
});

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