Question

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

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

虽然这有效，但这不是完美的解决方案。因为，在关闭First Modal时，它会一次性从主体中删除.modal-open，同时添加类同时打开第二个模态。但是，删除和添加类的效果是清晰可见的（因为从body元素中删除导致双滚动问题的类），这是我不想要的。我想从第一个模态转到第二个模态，.modal-open不会被删除。它只会在关闭第二个模态后删除。如何在bootstrap.js中没有任何触摸这样做？

Fiddle Demo

Answer 1

解决问题的更优雅的方法，无需添加和删除正文中的类，并且根本不可见的效果是添加和删除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模态从第一模态去第二模态从身体移除类

1 个答案: