Question

我在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>

在我的第一个模态中，我有两个其他按钮来检查我之前的＆amp;下一个项目（我的网站是一页）。
这就是我想做的事：
行动1）开放模式＃1
行动2）滚动＆amp;点击下一个项目
行动3）关闭模态＃1
行动4）开放模式＃2等...

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

当打开模态框时，我的身体有一个名为“模态打开”的附加类。但是，当我已经进入第一个模态＆amp;我想进入第二个项目（模态＃2），他出现但我的卷轴被锁定，我的身体失去了他的“模态开放”课程。

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

所以我尝试通过论坛帖子＆amp;什么都没有用。

我认为我必须寻找这种类型的片段，以便自动在课堂上添加课程，类似：

    $(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>

然后你只能使用一个简单的jquery函数：

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

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

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

Answer 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中快速删除了一个事件监听器。

右键单击您提及的模式中的按钮＆gt; 检查＆gt; 事件监听器＆gt; 点击＆gt;然后删除 div＃Modal_GA，modal.fade.in 事件监听器之一。现在，下一个模态正确地为我滚动。

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

Answer 3

模态完成动画关闭后，(setf result (concatenate 'string result (format nil "~%")))类将被删除，但在打开时由另一个模态添加。不幸的是，这些动画重叠。这意味着modal-open类是由打开模式添加的，然后由关闭模式快速删除的（据我所知）。

研究模态的后期事件（特别是modal-open，在开始动画结束时将触发它），https://getbootstrap.com/docs/4.0/components/modal/#events

shown.bs.modal

经过测试并在这里工作

Answer 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>

单页/模态打开类上的模态引导/多模态

4 个答案: