如何解决两个 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">×</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">×</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
加载。
你知道我如何处理这个错误吗?提前致谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。