引导模式问题(无法显示第二个模式）

Bootstrap modal issue (not able to show the second modal)

本文关键字：模式 显示 第二个 问题      更新时间：2023-09-26

所以我有两个模式，它们是根据我点击的按钮触发的

第一个是这样触发的：

<a id="de_details" data-toggle="modal" data-target=".show-de-banks"> </a>

它是这样构建的

<div class="modal fade show-de-banks" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    bla bla
                <div class="modal-body">
                    bla bla
                </div>
                <div class="modal-footer">
                    bla bla
                </div>
            </div>
    </div>
</div>

第二个使用按钮调用：

<button class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>

它是以同样的方式构建的：

<div class="modal fade open-dialog" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                dsfgdfg
            </div>
            <div class="modal-body">
                sdgfsdgsd
            </div>
            <div class="modal-footer">
               sdfds
            </div>
        </div>
    </div>
</div>

当我打开第一个时，我没有问题。

但当我想打开第二个时，它一出现就消失了。

我知道：

  • 我只需要包含一个js引导文件
  • 我的脚本必须在最后（为了页面快速加载）

我错过什么了吗？

正如Ubiquitous Developers Bootstrap模态问题（无法显示第二个模态）的评论所说，您应该将按钮type作为button

<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>

这是一个老问题，但我遇到了同样的问题并发现了这个问题。

在您的第一个模态中，具有类modal-header的div没有闭合——您缺少了一个</div>。

这意味着第二个模态将在第一个模态内部，这会导致问题。

我通过查看Chrome F12工具的元素选项卡发现了这个问题，它很好地显示了这样的问题。

相关文章：