Bootstrap：重叠模态不应冻结底层模态滚动

Question

我知道 Bootstrap 不鼓励重叠模式。我很快就建立了一个网站来帮助解决整个冠状病毒问题，所以我的重点是速度，而不是让一切都变得完美。因此，今天有人指出了一个错误。通常情况下，Bootstrap 模态会发生什么：

• Bootstrap 会根据模态内容自动设置滚动，也就是说如果内容需要滚动，我猜是添加了适当的 CSS
• 当模式打开时，背景内容（被有色覆盖覆盖）不可滚动
• 模态框关闭后，背景内容再次变为可滚动

我现在的问题是，在我重叠模态的情况下，在第一个模态之上打开的第二个模态会导致第一个模态的内容保持不可滚动，即使在第二个重叠模态关闭时也是如此。

我希望的行为是，当第二个modal关闭时，第一个modal返回“默认”，即如果内容需要可滚动性，则滚动返回。

这是一个实时站点：https://www.giftcardsforsmallbusinesses.com/

1. 单击以关注模式：如果您想在此处列出，请单击此处（确保您在屏幕上查看此内容时需要滚动模式内容，这是大多数屏幕.. . 内容很多）
2. 在弹出的模式中，在 How It Works 中找到 #4，然后单击 奖励值
3. 会弹出第二个小模态
4. 现在关闭第二个较小的模态
5. 您现在会注意到第一个模态：您是小企业主吗？不再可滚动。奇怪的是，背景内容，即原始页面，现在可以滚动了

我觉得这里有一个快速而肮脏的答案......我可以在类似的地方注入一些东西

PSEUDOCODE
$("#second-modal").on("close", function() {
  $("#first-modal").resetDefault()
})

但是我没有足够的 Twitter Bootstrap 经验来知道如何做到这一点，而且我在文档中找不到答案。

Answer 1

这应该可以解决它...

$('.modal').on("hidden.bs.modal", function (e) { 
    if ($('.modal:visible').length) { 
        $('body').addClass('modal-open');
    }
});

当您关闭重叠的奖励模态时，它会默认删除 body 类 .modal-open（不知道它下面还有另一个模态）。此类将overflow:hidden; 应用于正文并启用模态框独立滚动。

所以上面的脚本基本上是在关闭/隐藏奖励模式时再次添加类。

---

试试这个，这是直接针对奖励模态隐藏事件的。

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