登录模态框嵌套切换异常：多次切换后.modal-open类失效求助

我之前在项目里也碰到过一模一样的情况！Bootstrap官方其实不推荐模态框嵌套，这种场景下很容易出现各种状态不同步的bug，你遇到的body类消失就是典型的一种。

先说说你原来的脚本为什么会失效：你直接把事件绑定在.modal元素上，当多次切换模态框后，Bootstrap内部可能会重置模态框的DOM状态，导致原来的事件监听被解绑；另外你用的.hasClass('in')在Bootstrap 3+版本里其实已经被.show类替代了，这个判断条件可能也不准确，几次切换后就会出现判断错误。

给你两个可行的解决方案，按推荐程度排序：

方案1：避免模态框嵌套（官方推荐） #

最稳妥的办法是不要嵌套，点击「忘记密码」时先关闭登录模态框，再打开忘记密码的模态框。你可以把原来的链接改成这样：

<span id="forgot-password-link">Forgot password?</span>

然后添加JS逻辑：

$('#forgot-password-link').on('click', function(e) {
  e.preventDefault();
  // 关闭当前所有打开的模态框
  $('.modal.show').modal('hide');
  // 延迟300ms打开新模态框，确保前一个模态框的关闭动画完成
  setTimeout(() => {
    $('#forgot-pin-popup').modal('show');
  }, 300);
});

这种方式完全符合Bootstrap的设计逻辑，不会出现任何状态异常的问题。

方案2：修复事件监听逻辑（如果必须嵌套） #

如果你因为某些原因一定要保留嵌套结构，可以把事件监听改成委托模式，并且修正状态判断的逻辑：

// 用事件委托绑定在document上，确保所有模态框的事件都能被捕获
$(document).on('hidden.bs.modal', '.modal', function () {
  // 检查当前是否还有显示中的模态框
  const hasActiveModal = $('.modal.show').length > 0;
  if (hasActiveModal) {
    $('body').addClass('modal-open');
  } else {
    $('body').removeClass('modal-open');
  }
});

这个脚本会在任何模态框关闭时检查页面上是否还有其他显示的模态框，动态维护body的.modal-open类，而且事件委托的方式不会因为模态框的DOM变化而失效。

另外还要注意，如果你用的是Bootstrap 4+版本，模态框的状态类是.show而不是.in，这也是你原来的脚本几次后失效的可能原因之一。

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