模态弹出窗口未显示在 asp.net core mvc web 应用程序中答案

【问题标题】：Modal pop-up non showing in asp.net core mvc web app模态弹出窗口未显示在 asp.net core mvc web 应用程序中
【发布时间】：2022-01-15 20:37:54
【问题描述】：

我有一个基于 ASP.NET CORE MVC 的应用程序。尝试使用 JQuery 显示模式弹出窗口时出现奇怪的行为。

我有以下 div：

<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" id="form-modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <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 模式弹出窗口。当我点击按钮时，Javascript 将«in» 添加到类中，使其变为 class="modal fade in"，通常它应该添加 «show»。结果模态没有显示。所以在浏览器中我进入了开发模式并删除了«in»并添加了«show»并且它起作用了。

但我想知道为什么我的 JQuery 是添加 «in» 而不是 «show»。

这是我的 JQuery：

jQueryModalGet = (url, title) => {
    try {
        $.ajax({
            type: 'GET',
            url: url,
            contentType: false,
            processData: false,
            success: function (res) {
                $('#form-modal .modal-body').html(res.html);
                $('#form-modal .modal-title').html(title);
                $('#form-modal').modal('show');
                console.log(res);
            },
            error: function (err) {
                console.log(err)
            }
        })
        return false;
    } catch (ex) {
        console.log(ex)
    }
}

有什么想法吗？

【问题讨论】：

我还检查了 Bootstrap (v. 4.3.1) 和 JQuery (v. 3.3.1) 的版本，它们似乎兼容。

标签： javascript jquery asp.net-core-mvc bootstrap-modal

【解决方案1】：

最后，我解决了这个问题。

出于某种奇怪的原因，我同时包含了两个不同版本的 Bootstrap 和 JQuery，因此在模态显示过程中发生了冲突。

我有：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

删除后：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

我只使用本地绑定的库解决了它！

现在它就像一个魅力。

【讨论】：