模态引导/一页多模态/模态开放类答案

【问题标题】：Modal Bootstrap / Multiple modal on one-page / modal-open Class模态引导/一页多模态/模态开放类
【发布时间】：2018-01-06 05:18:18
【问题描述】：

我在 Bootstrap 中遇到了一个严重的模态问题。

当我在我的网站上打开一个模态框时，绝对没有问题（模态打开类正确添加到主体上）模态正确，阴影正常，内容清晰：

<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">×</span><p class="TxtClose">CLOSE</p>

在我的第一个模式中，我还有另外两个按钮来检查我以前和下一个项目（我的网站是单页的）。
这就是我想做的：
动作 1) 打开模态#1
操作 2) 滚动并单击下一个项目
行动 3) 关闭模式#1
动作 4) 打开 modal#2 等...

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

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

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

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

我想我必须寻找这种类型的 sn-ps 来自动在 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（当我粘贴新闻文件时，一切都坏了，所以对于这个网站，我现在只想保持在这个版本下）

【问题讨论】：

标签： javascript html css twitter-bootstrap bootstrap-modal

【解决方案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 的时间加载和资源。

【讨论】：

嘿@JoseMolina，也感谢您的帮助。我尝试了您的解决方案，经过多次操作以使用您的 sn-ps 修复此错误后，错误仍然存在。这段代码有一些新东西，第二部分正确打开，但之后立即关闭。我正在寻找我的模态按钮的值是否重复： - 打开第 1 节 - 向下滚动 - 单击 btn2 (> 第 2 节) - 关闭第 1 节 - 打开第 2 节 - 关闭section #2 也许这来自 data-dismiss="modal" 或 data-toggle="modal"。我一直保持这种方式来寻找解决方案。感谢您的帮助
不客气@Nóva 你确定你使用的按钮代码和我说的完全一样吗？因为我删除了数据关闭和数据切换。我的网站 www.josemolinaresume.com 的投资组合部分有类似的东西，如果你想看看。

【解决方案2】：

您已经添加了两次事件侦听器：

当我查看源代码时，我可以在第 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') 
})

我迅速删除了 Chromes Inspect Tool 中的一个事件监听器。

右键单击您提到的模态中的按钮 > 检查 > 事件监听器 > 单击 > 然后删除div#Modal_GA,modal.fade.in 事件监听器之一。下一个模态现在可以正确滚动了。

因此，我假设通过删除两个重复块中的一个，您将删除第二个侦听器，它基本上会触发两次并弄乱您的第二个模态...

【讨论】：

嗨@RichardDunn，感谢您的帮助。我试过这个，当我像你一样手动删除它时它会起作用。对于第一个，双javascript，没关系。我尝试了很多方法来修复这个错误，这就是为什么我犯了这个错误，但现在可以了。你在我认为的好方法上。 > div#Modal_GA,modal.fade.in 我的印象是这个元素是重复动态创建的。检查后，我进行了搜索，我没有发现这个项目在我的代码中重复。我一直在寻找这个错误。感谢您的帮助
“动态”添加并不重要，它仍然会在 DOM 中注册事件监听器两次。您可以通过从“动态”代码中删除 sn-p 并将其“静态”添加到您的索引页面上来进一步测试这个问题。

【解决方案3】：

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' );
});

在这里测试和工作

【讨论】：

【解决方案4】：

<h1>Bootstrap 4x multiple modals in one page</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg1">Large modal1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg2">Large modal2</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg3">Large modal3</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg4">Large modal4</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg5">Large modal5</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg6">Large modal6</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg7">Large modal7</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg8">Large modal8</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg9">Large modal9</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg10">Large modal10</button>


<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal1</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal2</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal3</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg4" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal4</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg5" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal5</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg6" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal6</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg7" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal7</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg8" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal8</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg9" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal9</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg10" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Large modal10</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>

【讨论】：