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

问题描述 投票:0回答:1

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

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

<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 的交互方式有关,或者可能与某些页面特定的配置问题有关。

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

jquery asp.net-core bootstrap-modal bootstrap-5
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.