Modal Bootstrap /多页模式的单页/模式打开类

我有一个严重的问题与模式从Bootstrap。Modal Bootstrap /多页模式的单页/模式打开类

当我在我的网站打开一个模式对话框，有是绝对没有问题的（模态，公开课是对身体正确添加）的模式是正确的，遮阳确定，内容明确：

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

当我manualy关闭它，它也没关系：

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

在我的第一个模式，我有两个其他的按钮来检查我以前&下一个项目（M y网站是一个页面）。
而这正是我想做的事：
行动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：我与引导v3.3.7工作（当我粘贴新闻档案，一切都坏了，所以这个网站，我只是想呆在这个版本下现在）

来源

2017-07-30 Nóva

也许可能是更方便，当你显示/隐藏每个下一个/上一个投资组合项目的模态时，可以稍微改变一点。

<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的资源。

来源

2017-07-30 20:49:00

嘿@JoseMolina，感谢您也帮助。我尝试了你的解决方案，并经过许多操作来修复这个bug与你的片段错误留下来。这段代码有一些新东西，第二部分正确打开，但之后立即关闭。我在找，如果没有我的模式按钮的值的重复： - 开节＃1 - 向下滚动 - 点击BTN2（>部分＃2） - 近段＃1 - 开放部分＃2 - 关闭部分＃2 也许这是来自data-dismiss =“modal”或data-toggle =“modal”。我保持这种方式，然后找到解决方案。感谢您的帮助 –

欢迎您@Nóva 您确定您使用的按钮代码与我放的完全相同吗？因为我删除了数据关闭和数据切换。在我的网站www.josemolinaresume.com的投资组合部分，我有类似的东西，如果你想看看。 –

您已经将事件侦听器两次：

当我查看源代码，我可以看到线583和1046以下：

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

我迅速删除事件侦听器中的一个铬合金检查工具。

右键点击你所提到的模态的按钮>检查>事件监听器>点击>然后删除DIV＃Modal_GA之一，modal.fade.in事件侦听器。下一个模式现在为我正确滚动。

我承担，因此，通过移除两个复制块中的一个，你会删除此第二个侦听器，它基本上是射击两次，搞乱你的第二个模式...

来源

2017-07-30 21:17:42

嗨@RichardDunn，谢谢你的帮助。我尝试了这一点，并且它在我删除这个手册时，就像你一样工作。首先，双JavaScript，没关系。我正在尝试很多事情来解决这个错误，这就是为什么我让这个错误，但现在没问题。你对我的想法很好。 > div＃Modal_GA，modal.fade.in是我感觉这个元素是动态创建的重复。检查后，我搜索了，我没有发现这个项目在我的代码中重复。我一直在寻找这个bug。感谢您的帮助 –

不管它是否被'动态'添加，它仍然在DOM中注册事件监听器两次。您可以通过从“动态”代码中删除片段并在索引页上“静态”添加片段来进一步测试这个问题。 –

Modal Bootstrap /多页模式的单页/模式打开类

回答

相关问题