两个 Bootstrap Modals 冻结页面

问题描述

我有一个问题，当我在 .cshtml 文件的末尾声明了两个 Bootstrap Modal 时，打开第一个声明的 Modal 会导致整个页面冻结。

如果我改变两个模态的顺序，第一个声明的模态又会导致冻结。

因此我认为它必须与声明的地方有关。

我的一般设置是这样的（按此顺序）：

第一次模态调用：

@Ajax.ActionLink("Action1","Action1_AL","Controller",new { id = x },new AjaxOptions { HttpMethod = "GET",UpdateTargetId = "Preview_first_modal",InsertionMode = InsertionMode.Replace,OnSuccess = "Open_first_modal()" },new { @class = "btn btn-sm btn-default" })

第二个模态调用：

@Ajax.ActionLink("Action2","Action2_AL",new { id = y },UpdateTargetId = "Preview_second_modal",OnSuccess = "Open_second_modal()" },new { @class = "btn btn-sm btn-default" })

第一个模态设置：

<div class="modal fade" id="my_first_modal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body align-self-center" id="Preview_first_modal">
                @*PartialView*@
            </div>
        </div>
    </div>
</div>

第二个模态设置：

<div class="modal fade" id="my_second_modal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body align-self-center" id="Preview_second_modal">
                @*PartialView*@
            </div>
        </div>
    </div>
</div>

Javascript：

function Open_first_modal() {
    $('#my_first_modal').modal('show');
}

function Open_second_modal() {
    $('#my_second_modal').modal('show');
}

css 文件：

body {
}

th {
    border: solid 1px #ddd !important;
}

td {
    border: solid 1px #ddd !important;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #ddd;
}

.dataTables_wrapper .dataTables_filter input {
    border: solid 1px #ddd;
}

thead > tr > th {
    border-bottom-width: 2px !important;
}

body .modal-dialog {
    max-width: 100%;
    width: auto !important;
    display: inline-block;
}

.modal {
    z-index: -1;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.modal-open .modal {
    z-index: 1050;
}

在两种模式中，我都显示了一个 PartialView，它由 ActionLinks Action1_AL 和 Action2_AL 加载。

在此设置中，单击按钮调用第一个模式会导致页面冻结。

你知道我如何处理这个错误吗？提前致谢！

编辑：添加了 .css 文件

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）