css - 多个 Bootstrap 模态滚动问题

Question

最初，网站上只有一个模式。它正在使用滚动条，但锁定了主页(只显示一个滚动条，模态滚动条)。

然后，我添加了第二个模态(真的不喜欢多个模态但不是我在这里的选择)，同样的行为:主页和第一个模态被锁定，只滚动新模态。

但是当关闭这个新模态时，会出现两个滚动条，一个用于原始模态，一个用于主页。

我希望它像没有第二个模态一样工作:当我关闭第二个模态时，我只想显示第一个模态滚动条，而不是双滚动条。

已经尝试使用 CSS 但无法实现，并尝试了一些关于类似问题的答案，但也没有用。

编辑 1:我在 get Bootstrap site 中检查过这个我得到了相同的结果。打开任何模式时，滚动仅针对模式锁定。但随后，我打开了第二个模式(通过控制台中的 jQuery)并将其关闭。现在只显示一个滚动条，它用于主页，第一个模式它不再可滚动。

Answer 1

打开模态时，modal-open 类会添加到正文中。当模式关闭时，该类将被删除。因此，当我关闭第二个模式时，该类被删除，显示主页的滚动条。

使用 this answer我找到了解决方案:要在第二个模式关闭时添加对方法的调用，请调用此行 $('body').addClass('modal-open');。这样，我们在关闭第二个模式时仍然拥有所需的 CSS。

$('#myModal').on('hidden.bs.modal', function () {
    $('body').addClass('modal-open');
})