Bootstrap Modal 在没有淡入淡出类的情况下不显示答案

【问题标题】：Bootstrap Modal not showing without fade classBootstrap Modal 在没有淡入淡出类的情况下不显示
【发布时间】：2024-05-17 21:30:03
【问题描述】：

我对此感到非常困惑......我正在使用引导程序 4，并且我想要在官方网站上使用非动画（淡入淡出）模式，它说要删除“淡入淡出”类，所以我删除了它，但是它停止工作，之后没有出现的模态 div 并且当我单击按钮时仍然添加“显示：无”。

<button class="btn btn-primary btn-lg" data-target="#mobileMessageBox" data-toggle="modal" type="button" onclick="getTalkCQSP(this)">TEST</button>

<div id="mobileMessageBox" class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"
    style="max-height: 100vh; ">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body p-0">
            </div>
        </div>
    </div>
</div>

【问题讨论】：

你包含了 Bootstrap 的所有必要的 CSS 和 JS 文件吗？隐藏模式的自定义 CSS 样式？ - 无法用您的代码重现。
是的......就像淡入淡出类作品一样，我有这个：jquery-3.4.1.min.js，bootstrap-grid.css，bootstrap.css，bootstrap-reboot.css，bootstrap。 js、bootstrap.bundle.js
是的，您无法运行此代码，因为 onclick 中有一个函数，只需将其删除即可。不，我在我的 css 和 js 海关文件中搜索任何模态选择器，但我找不到任何东西，所以......我不明白为什么这不起作用
我尝试过使用和不使用淡入淡出类，但无论哪种方式都不起作用，所以问题不在于删除淡入淡出类
可能因为没有内容而看不到模态框？

标签： html css bootstrap-4

【解决方案1】：

确保包含所有必要的 CSS 和 JavaScript Bootstrap 文件：

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

注意：还要确保不要使用自己的自定义 CSS 隐藏模式。

使用您给定示例的所有 CSS 和 JavaScript 文件：

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<button class="btn btn-primary btn-lg" data-target="#mobileMessageBox" data-toggle="modal" type="button" onclick="getTalkCQSP(this)">TEST</button>

<div id="mobileMessageBox" class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"
     style="max-height: 100vh; ">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body p-0">Hello
            </div>
        </div>
    </div>
</div>

【讨论】：

bootstrap.bundle.js 是问题，我不能使用模态，因为它