在 ASP.NET Core 中升级到 Bootstrap 5 和 jQuery 3 后，Bootstrap 模式未触发

Question

最近在我的 ASP.NET Core 项目中将 jQuery 从 v2.2.4 更新到 v3.7.1，将 Bootstrap 从 v2.2.2 更新到 v5.0.2。更新后，我遇到了一个问题，即单击按钮时不会触发模式弹出窗口，即使相同的设置在其他页面上运行得很好。我已经通过控制台日志和其他功能确认 Bootstrap 和 jQuery 都已正确加载。

以下是按钮无法触发模态框的示例：

<a class="btn btn-sm" data-bs-toggle="modal" data-bs-target="#userSyncConfigHelp">Help</a>

<div style="display: none;" class="modal biggerModal" id="userSyncConfigHelp" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title">User Sync Config Help</h3>
            </div>
            <div class="modal-body">
                <p>Hello World</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

单击“帮助”按钮时，没有任何反应。但是，如果我使用 Bootstrap 文档中的以下按钮版本：

<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

它只是将模式 ID 附加到 URL（例如，将 #userSyncConfigSampleAzureAD 添加到 URL）。在模式正常运行的其他页面上进行其他类似设置时，不会出现此问题，例如：

<a class="btn btn-small" data-bs-toggle="modal" data-bs-target="#snippetHotKeysHelp">Help</a>

<div style="display: none;" class="modal biggerModal" id="snippetHotKeysHelp" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title">Snippet Hotkeys Help</h3>
            </div>
            <div class="modal-body">
                <p>Hello World</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

怀疑该问题可能与 Bootstrap 的 JavaScript 与新版本 jQuery 的交互方式有关，或者可能与某些页面特定的配置问题有关。

问题：有没有人在升级这些库时遇到类似的问题，我该如何解决模态触发问题？

Answer 1

Bootstrap Modal 在您端不起作用，因为它依赖于 Popper.js。从您的屏幕截图来看，您没有导入 popper.js。

确保在Bootstrap.js之前导入Popper.js文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>

或者，您可以导入bootstrap.bundle.js，因为它包含Popper.js。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>

演示@StackBlitz