旧版本 bootstrap 模态从正文中删除 class 从第一个模态进入第二个模态

Question

嗯，最新的 bootstrap 版本没有这个问题。但是，我无法更改现有网站的库版本。所以，我正在尝试为我的项目手动解决这个问题。对于 bootstrap 的早期 3.x 版本来说，这个问题是老问题了。从模式中打开另一个模式从 body 中删除 .modal-open。我还没有找到解决方案。我尝试的是通过定位第二个模态的 ID 再次添加 class：

$(document)
    .on('shown.bs.modal', '#secondModal', function () { $('body').addClass('modal-open') })
    .on('hidden.bs.modal', '#secondModal', function () { $('body').removeClass('modal-open') });

虽然这可行，但这不是完美的解决方案。因为，在关闭 First Modal 时，它会一次又一次地从 body 中删除 .modal-open 并添加 class 并同时打开第二个 Modal。但是，删除和添加 class 的效果是清晰可见的（因为从正文元素中删除 class 会导致双滚动问题），这是我不想要的。我想从第一个模态转到第二个模态，.modal-open 不会被删除。它只会在关闭第二个模式后被删除。 bootstrap.js?

中没有任何接触如何做到这一点

Fiddle Demo

Answer 1

更优雅的解决问题的方法是在正文中添加和删除 class 并且效果根本不可见是添加和删除 overflow 这基本上是原因和原因从第一个模态切换到第二个模态时滚动条的大小。

$(document).ready(function() {
  $('#secondModal').on('show.bs.modal', function() {
    $('body').css('overflow-y', 'hidden');
  });
  $('#secondModal').on('hidden.bs.modal', function() {
    $('body').css('overflow-y', '');
  });
});

注意：当模式即将显示时，第一个事件从 shown 更改为 show，因此滚动条隐藏效果根本不会引人注意，第二个事件应该是 hidden否则 hide 你可以看到第二个滚动条出现和消失。

Working Fiddle Example

旧版本 bootstrap 模态从正文中删除 class 从第一个模态进入第二个模态

Old version bootstrap modal remove class from body on going second modal from first modal

twitter-bootstrap

bootstrap-modal