微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

关闭一个模态窗口具有部分视图，然后打开另一个模态窗口具有部分视图

分类：编程问答

如何解决关闭一个模态窗口具有部分视图，然后打开另一个模态窗口具有部分视图

我有一个带有两个模式窗口的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,.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,.125);">ID</th>
                    <th style="color:white; border: 1px solid rgba(0,.125);">Bill To</th>
                    <th style="color:white; border: 1px solid rgba(0,.125);">Items</th>
                    <th style="color:white; border: 1px solid rgba(0,.125);">Total</th>
                    <th style="color:white; border: 1px solid rgba(0,.125);">Invoice Status</th>

                </tr>
                @{
                    if (Model.invoices != null)
                    {
                        foreach (var modelItem in Model.invoices)
                        {

                            <tr style="border: 1px solid rgba(0,.125);  height:40px;">
                                <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.InvoiceID</td>
                                <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.BillTo</td>
                                <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.InvoiceItems.Count() Items</td>
                                <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.Total.ToString("C")</td>
                                <td style="border: 1px solid rgba(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">&times;</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,.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,.125);">Name</th>
                <th style="color:white; border: 1px solid rgba(0,.125);">Denomination</th>
                <th style="color:white; border: 1px solid rgba(0,.125);">Church Type</th>
                <th style="color:white; border: 1px solid rgba(0,.125);">Church Address</th>
                <th style="color:white; border: 1px solid rgba(0,.125);">Church City</th>
                <th style="color:white; border: 1px solid rgba(0,.125);">Church State</th>
                <th style="color:white; border: 1px solid rgba(0,.125);">Church Zip</th>
                <th style="color:white; border: 1px solid rgba(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,.125);  height:40px;">
                            <td style="display:none;">@modelItem.churchID</td>
                            <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.Name</td>
                            <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.Denomination</td>
                            <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.churchType</td>
                            <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.Address</td>
                            <td style=" border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.City</td>
                            <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.State</td>
                            <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@modelItem.Zip</td>
                            <td style="border: 1px solid rgba(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">&times;</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,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",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}",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,.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,.125);">ID</th>
                                        <th style="color:white; border: 1px solid rgba(0,.125);">Description</th>
                                        <th style="color:white; border: 1px solid rgba(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,.125);  height:40px;">
                                                        <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@count</td>
                                                        <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@invoiceItem.Description</td>
                                                        <td style="border: 1px solid rgba(0,.125); vertical-align:middle;">@invoiceItem.StipendPerMass.ToString("C")</td>
                                                        <td style="display:none; border: 1px solid rgba(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' });
                });

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot