Modal Bootstrap / 一页多模式 / modal-open Class

Question

我对 Bootstrap 的模式有一个严重的问题。

当我在我的网站上打开模态框时，绝对没有问题（modal-open 类已正确添加到正文中）模态正确，阴影正常且内容清晰：

<button type="button" data-toggle="modal" data-target="#Modal_GA">buttonOpenMe</button>

当我手动关闭它时，也可以：

<button type="button" class="close2" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span><p class="TxtClose">CLOSE</p>

在我的第一个模式中，我有两个其他按钮来检查我以前和下一个项目（我的网站是一页）。

这就是我想要做的：

动作 1) 打开模态#1

动作 2) 滚动并点击下一个项目

动作 3) 关闭模态#1

动作 4) 打开模态#2，等等…

<button type="button" data-dismiss="modal" data-toggle="modal" data-target="#Modal_Animations"> CloseThis </button>

打开模态框时，我的身体有一个名为“模态打开”的附加类。但是当我已经在第一个模态并且我想进入第二个项目（模态＃2）时，他出现了但我的滚动条被锁定并且我的身体失去了他的“模态打开”类。

我认为 data-dismiss=“modal” 清除了一切。但是，当我在打开第二个模态时手动（使用检查器）在我的身体上添加“模态打开”类时，一切正常。

所以我尝试用论坛帖子中的很多解决方案来解决这个问题，但没有任何效果。

我想我必须寻找这种类型的片段来自动在身体上添加类，就像这样：

     $(document)
.on('show.bs.modal', '.modal', function () {
    $(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
    $(document.body).removeClass('modal-open')
})

但实际上，显然一切都失败了！

我怎样才能解决这个问题？

如果您想查看我的在线测试版本： http ://bg-portfolio.com/bg_test/index.php，滚动并单击第一个项目“Gamers Assembly 2017”，然后滚动并单击“Projet suivant” “（下一个项目）。错误会出现！

PS：我正在使用 Bootstrap v3.3.7（当我粘贴新闻文件时，一切都坏了，所以对于这个网站，我现在只想留在这个版本下）

原文由 Nóva 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

modal-open 类在模态完成动画关闭后被删除，但在打开时由另一个模态添加。不幸的是，这些动画重叠。这意味着 modal-open 类由打开模式添加，然后由关闭模式快速删除（据我所知）。

挂钩到模态的后期事件（特别是 shown.bs.modal ，当打开动画结束时触发）应该在这里帮助你： https ://getbootstrap.com/docs/4.0/components/modal/#events

 $( '#modal1' ).on( 'shown.bs.modal', function(){
    document.body.classList.add( 'modal-open' );
});
$( '#modal2' ).on( 'shown.bs.modal', function(){
    document.body.classList.add( 'modal-open' );
});

在这里测试和工作

原文由 Abraham Brookes 发布，翻译遵循 CC BY-SA 4.0 许可协议