jquery - 关闭一个模态窗口（局部视图）并打开另一个模态窗口（局部视图）不起作用
问题描述
我有一个带有两个模式窗口的 MVC 5 应用程序。第一个称为 SelectChurchModal 打开一个带有局部视图的模式，允许用户进行选择。当用户选择教堂时，我想关闭该模式并打开另一个模式以创建名为 AddNewInvoiceModal 的发票。我的问题是，当我在用户单击表格行时关闭第一个模式时，模式退出另一个不显示。我只是得到没有模态窗口和数据的深色叠加层。如果我只是打开 SelectChurchModal 顶部的 AddNewInvoiceModal 窗口，它可以正常工作。在打开第二个模式之前，我有什么办法可以成功关闭第一个模式？我用过$('AddNewInvoiceModal').modal('hide');，但是当我用$('AddNewInvoiceModal').modal('show');我只是得到一个黑暗的背景，什么都没有。控制器方法 AddNewInvoice() 和 SelectChurch() 都返回部分视图。
这是我的常规发票视图：
@model Church_Musician_Administration_App__Updated_.Models.InvoicesModel
@{
ViewBag.Title = "Invoices";
}
<style>
.highlight {
background-color: darkviolet !important;
color: white;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgb(222, 178, 241);
}
.table-striped tbody tr:nth-of-type(even) {
background-color: rgb(233, 204, 246);
}
#invoices {
font-family: "Arial";
padding-left: 10px;
padding-right: 10px;
}
</style>
<h3>Invoices</h3>
<hr />
<div style="text-align:center; padding-bottom: 1rem;"><b>Please click on an invoice and then select one of the options below.</b></div>
<div style="margin-top: 5px; margin-bottom: 15px; text-align:center">
@using (Html.BeginForm("AddNewInvoiceSetup", "App", FormMethod.Post))
{
<button type="button" class="btn btn-primary" id="AddNewInvoice" onclick="SelectChurch()">Add New Invoice</button>
<button data-toggle="modal" data-id="1" data-target="#jobModal" type="button" class="btn btn-primary" id="viewEditInvoice">View/Edit Invoice</button>
<button data-toggle="modal" data-id="1" data-target="#sendMessageToMusicDirectorModal" type="button" class="btn btn-primary" id="deleteInvoice">Delete Invoice</button>
}
</div>
<h6 class="alert-success text-center" style="font-size: 20px">@TempData["InvoiceAddedSuccessfully"]</h6>
<h6 class="alert-success text-center" style="font-size: 20px">@TempData["MessageDeletedSuccessfully"]</h6>
<div class="card w-100" style="min-height:525px; width: 100%!important; border:0;">
<div class="card-body" style="padding:0;">
<table id="invoices" class="table table-striped" style="width:100%; border: 1px solid rgba(0,0,0,.125); border-left:none; border-right:none; text-align: center; display:inline-table;">
<tbody>
<tr style="background-color:darkviolet; height:40px; width:100%">
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">ID</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Bill To</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Items</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Total</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Invoice Status</th>
</tr>
@{
if (Model.invoices != null)
{
foreach (var modelItem in Model.invoices)
{
<tr style="border: 1px solid rgba(0,0,0,.125); height:40px;">
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.InvoiceID</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.BillTo</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.InvoiceItems.Count() Items</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Total.ToString("C")</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.InvoiceStatus</td>
</tr>
}
}
}
</tbody>
</table>
@if (Model.invoices.Count == 0)
{
<div style="text-align:center; padding-top: 10%;">You are not scheduled to do any masses at this time. Please go to Availible Sub Jobs for a list of available jobs.</div>
}
</div>
</div>
<div class="modal" tabindex="-1" id="SelectChurchModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select A Church To Send An Invoice To</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="SelectChurchModalBodyDiv">
</div>
</div>
</div>
</div>
<script>
$("#invoices tr").click(function () {
$("#invoices tr").removeClass("highlight");
$(this).addClass("highlight");
$('#jobModal').on('hidden.bs.modal', function () {
$("#subJobs tr").removeClass("highlight");
});
});
var SelectChurch = function () {
$.ajax({
type: "Post",
url: "/App/SelectChurch",
data: {},
success: function (response) {
$("#SelectChurchModalBodyDiv").html(response);
$("#SelectChurchModal").modal("show");
}
})
}
</script>
这是我的部分 SelectChurchModal：
@model Church_Musician_Administration_App__Updated_.Models.InvoicesModel
<style>
.highlight {
background-color: darkviolet !important;
color: white;
}
#churchesTableContainer {
padding-left: 10px;
padding-right: 10px;
overflow-y: auto;
height: 500px;
display: block;
}
#churchesTable {
padding-left: 10px;
padding-right: 10px;
overflow-y: scroll;
display: block;
font-family: "Arial";
}
#churchesTable tr {
cursor: pointer;
}
#churchesTable th{
cursor:default;
}
@@media only screen and (min-width: 200px) and (max-width: 992px) {
#invoiceModalBodyDiv {
padding: 5px;
}
}
</style>
<div id="churchesTableContainer">
<table id="churchesTable" class="table table-striped" style="width:100%; border: 1px solid rgba(0,0,0,.125); border-left:none; border-right:none; text-align: center; display:inline-table;">
<tbody>
<tr style="background-color:darkviolet; height:40px; width:100%">
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Name</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Denomination</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Church Type</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Church Address</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Church City</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Church State</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Church Zip</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Diocese</th>
</tr>
@{
if (Model.invoices != null)
{
foreach (var modelItem in Model.Churches.OrderBy(x => x.Name))
{
<tr style="border: 1px solid rgba(0,0,0,.125); height:40px;">
<td style="display:none;">@modelItem.churchID</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Name</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Denomination</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.churchType</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Address</td>
<td style=" border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.City</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.State</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Zip</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Diocese</td>
</tr>
}
}
}
</tbody>
</table>
</div>
<div class="modal" tabindex="-1" id="AddNewInvoiceModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Invoice</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="invoiceModalBodyDiv">
</div>
</div>
</div>
</div>
<script>
$("#churchesTable tr").click(function () {
$("#churchesTable tr").removeClass("highlight");
$(this).not('th').addClass("highlight")
var idFromTable = 0;
idFromTable = $("#churchesTable tr").closest("tr.highlight").find('td:eq(0)').text();
alert(idFromTable);
$.ajax({
type: "Post",
url: "/App/AddNewInvoice",
data: { churchID: idFromTable },
success: function (response) {
$("#invoiceModalBodyDiv").html(response);
$('#AddNewInvoiceModal').modal({ backdrop: 'static' });
$("#AddNewInvoiceModal").modal("show");
}
})
});
</script>
最后这是 AddNewInvoiceModal 部分：
@model Church_Musician_Administration_App__Updated_.Models.InvoicesModel
<style>
.highlight {
background-color: darkviolet !important;
color: white;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgb(222, 178, 241);
}
.table-striped tbody tr:nth-of-type(even) {
background-color: rgb(233, 204, 246);
}
#invoices {
font-family: "Arial";
padding-left: 10px;
padding-right: 10px;
}
#wrappertable1 {
text-align: left;
width: 50%;
float: left;
padding-left: 10px;
}
#wrappertable2 {
text-align: right;
width: 50%;
float: left;
padding-right: 10px;
}
#table1 {
border-collapse: separate;
border-spacing: 0 15px;
float: left;
text-align: left;
width: 95%;
}
#table2 {
border-collapse: separate;
border-spacing: 0 15px;
float: right;
text-align: left;
width: 95%;
margin-top: -12px;
}
#table3 {
padding-left: 10px;
padding-right: initial;
overflow-y: auto;
display: block;
font-family: "Arial";
}
#table4 {
padding-left: 10px;
padding-right: 10px;
overflow-y: auto;
height: 500px;
display: block;
}
#invoices tr {
cursor: pointer;
}
#invoiceItems {
overflow-y: scroll;
max-height: 500px;
display: block;
}
#invoiceItemsAdd tr {
cursor: pointer;
}
#invoiceItemsAdd {
overflow-y: scroll;
max-height: 500px;
display: block;
}
#wrappertable3 {
padding-left: 10px;
padding-right: 10px;
overflow-y: auto;
height: 350px;
display: block;
}
@@media only screen and (min-width: 992px) and (max-width: 1199px) {
#wrappertable2 {
padding-bottom: 20px
}
#table2{
border-spacing: 0px 28px;
}
}
@@media only screen and (min-width: 200px) and (max-width: 992px) {
#wrappertable2 {
padding-bottom: 20px;
padding-left: 10px;
}
#table1{
width:100%;
}
#table2{
width:100%;
margin-top: initial;
}
#table3{
padding-left:initial;
}
#wrappertable1{
width: 100% !important;
padding: 10px;
}
#wrappertable2{
width: 100% !important;
}
#wrappertable3{
height: 225px;
}
#totalTableContainer{
padding-right: 60%;
}
}
</style>
@using (Html.BeginForm("AddNewInvoice", "App", FormMethod.Post))
{
foreach (var inv in Model.invoices)
{
<div id="wrappertable1">
<table id="table1">
<tbody>
<tr style="padding-bottom:20px;">
<th>Bill To:</th>
<td colspan="2">@Html.DisplayFor(x => inv.BillTo, new { @class = "form-control", @style = "width:100%;" })</td>
</tr>
<tr>
<th>Invoice Date:</th>
<td colspan="2">@Html.TextBoxFor(x => inv.InvoiceDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date", style = "width:100%" })</td>
</tr>
</tbody>
</table>
</div>
<div id="wrappertable2">
<table id="table2">
<tbody>
<tr>
<th>Invoice Number:</th>
<td><input type="text" disabled class="form-control" value="@inv.InvoiceID" /></td>
</tr>
<tr id="buttonsContainer">
<td style="width: calc(100% / 2);"><button type="button" class="btn btn-primary" style="width:100%" id="deleteItemButton">Delete Item</button></td>
<td style="width: calc(100% /2);"><button type="button" class="btn btn-primary" style="width:100%" data-toggle="modal" data-id="1" data-target="#AddInvoiceItemModal" id="addItemButton">Add Item</button></td>
</tr>
</tbody>
</table>
</div>
}
<div id="wrappertable3">
<div id="table3">
<table id="invoiceItems" class="table table-striped" style="width:100%; border: 1px solid rgba(0,0,0,.125); border-left:none; border-right:none; text-align: center; display:inline-table;">
<tbody>
<tr style="background-color:darkviolet; height:40px; width:100%">
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">ID</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Description</th>
<th style="color:white; border: 1px solid rgba(0,0,0,.125);">Stipend</th>
</tr>
@{
if (Model.invoices != null)
{
int count = 1;
foreach (var modelItem in Model.invoices)
{
foreach (var invoiceItem in modelItem.InvoiceItems)
{
<tr style="border: 1px solid rgba(0,0,0,.125); height:40px;">
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@count</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@invoiceItem.Description</td>
<td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@invoiceItem.StipendPerMass.ToString("C")</td>
<td style="display:none; border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@invoiceItem.TotalAmount</td>
</tr>
count = count + 1;
}
}
}
}
</tbody>
</table>
</div>
</div>
<div id="totalTableContainer" style="text-align:right; padding-left:75%; border:none;">
<table id="totalTable" style="width:100%; display:inline-table; border:none; font-size:22px;">
<tbody>
<tr style="background-color:darkviolet; height:40px; width:100%">
<th style="background-color:white; text-align: right; ">Total: </th>
<td style="background-color:white; text-align: left;">
<div id="total"></div>
</td>
</tr>
</tbody>
</table>
</div>
<hr />
<div style="margin-top: 5px; margin-bottom: 15px; text-align:center">
<button type="button" class="btn btn-primary" style="width:calc(100%/4)" id="EmailInvoice">Email Invoice</button>
<button type="button" class="btn btn-primary" style="width:calc(100%/4)" id="PrintInvoice">Print Invoice</button>
<button type="button" class="btn btn-primary" style="width:calc(100%/4)" id="CloseInvoice">Close</button>
</div>
}
请原谅内联css。在我测试我的代码时，这只是暂时的。我需要在 AddNewInvoiceModal 打开之前关闭 SelectChurchModal。也许我在代码中犯了一个小错误？
解决方案
**u can do same with modals**
$(document).ready(function () {
$("#btnx").click(function () {
$("#reg").fadeToggle()
$('#list,#hist,#test,#dash,#listtest,#dash2').css({ 'display': 'none' });
});
推荐阅读
- docker - 是否可以在 MacOS 上绑定到 127.0.0.1 以外的另一个 IP？
- python - 如何使用正则表达式在字符串中查找重复的单词
- javascript - 在Angular 12 TypeScript中设置超时后调用函数？
- python - 如何修复：“TypeError：无法解压不可迭代的 NoneType 对象”
- bash - 如何在第二列中对重复项进行分组并在第三列中为它们分配一个新编号？
- c++ - 'struct std::common_reference 中没有名为 'type' 的类型
- linux - 防止 SLURM 在 /home 文件夹中运行
- amazon-web-services - 为 Cloudtrail 启用 AWS Cloudwatch 日志的好处？
- java - C# 和 Java 的散列结果不同
- android-studio - 为 recyclerView 中的每个项目暂停和恢复下载