Javascript 两个引导模态冻结页面_Javascript_Html_Ajax_Asp.net Mvc_Model View Controller

Javascript 两个引导模态冻结页面

javascript html ajax asp.net-mvc model-view-controller

Javascript 两个引导模态冻结页面,javascript,html,ajax,asp.net-mvc,model-view-controller,Javascript,Html,Ajax,Asp.net Mvc,Model View Controller,我有一个问题，当我在.cshtml文件末尾声明了两个引导模式时，打开第一个声明的模式会导致整个页面冻结如果我改变两个模态的顺序，第一个声明的模态会导致冻结因此，我认为这与申报地点有关我的常规设置如下（按此顺序）：第一次模态调用： @Ajax.ActionLink("Action1", "Action1_AL", "Controller", new { id = x },

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

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

因此，我认为这与申报地点有关

我的常规设置如下（按此顺序）：

第一次模态调用：

@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", "Controller",
                            new { id = y },
                            new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "Preview_second_modal", InsertionMode = InsertionMode.Replace, 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>

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

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

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;
}

第二模态调用：

@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", "Controller",
                            new { id = y },
                            new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "Preview_second_modal", InsertionMode = InsertionMode.Replace, 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>

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

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

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;
}

第一模式设置：

@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", "Controller",
                            new { id = y },
                            new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "Preview_second_modal", InsertionMode = InsertionMode.Replace, 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>

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

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

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;
}

css文件：

@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", "Controller",
                            new { id = y },
                            new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "Preview_second_modal", InsertionMode = InsertionMode.Replace, 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>

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

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

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\u AL

和

Action2\u AL

加载

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

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

编辑：添加了.css文件

我不知道到底出了什么问题，但将模式属性替换为css

.modal {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    max-width: 100%;
    width: auto !important;
    vertical-align: middle;
}

解决了这个问题