javascript - 单页/模态打开类上的模态 Bootstrap/多模态

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>

在我的第一个模式中，我有两个其他按钮来检查我之前和下一个元素(我的网站是一页)。
这就是我想做的:
Action 1) 打开模态#1
操作 2) 滚动并点击下一个元素
Action 3) 关闭模态#1
Action 4) 打开模态#2，等等...

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

当模式框打开时，我的 body 有一个名为“modal-open”的添加类。但是当我已经在第一个模态并且我想进入第二个元素(模态#2)时，他出现了但我的滚动条被锁定并且我的 body 失去了他的“模态打开”类。

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

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

我想我必须寻找这种类型的片段来自动在主体上添加类，类似这样的:

    $(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(当我粘贴新闻文件时，一切都坏了，所以对于这个网站，我现在只想留在这个版本下)

Answer 1

也许可以更方便，在显示/隐藏每个下一个/上一个投资组合元素的模式时稍微改变一下方式。

<button type="button" class="close2" data-actual="#Modal_GA" data-target="#Modal_Animations">
   <span aria-hidden="true">&gt;</span><p class="TxtClose">PROJET SUIVANT</p>
</button>

然后你可以只使用 1 个简单的 jquery 函数:

  $('.close2').click(function() {
    var actualModal = $(this).attr('data-actual');
    var newModal = $(this).attr('data-target');

    $(actualModal).modal('hide');
    $(newModal).modal('show');
  }); 

请注意，您不再需要为每个投资组合元素创建脚本，这样您将为浏览器中的 JS 节省时间和资源。