Bootstrap 4-Bootstrap对话框不会隐藏模式背景

Question

我有一个模态，其中包含隐藏或显示的div。迁移到Bootstrap 4后，每次我关闭模态时，屏幕都会保持褪色为透明的黑色。

我检查了Chrome上的开发工具，每次关闭模式时，此元素都会保留在屏幕上：

当用户按下关闭模式对话框的按钮时，将调用一个函数：

cancelModal: function () {
        $('#huhn-scale-modal').hide();
        app.Core.UnblockElement('#huhn-scale-modal');

        $("#btnSave").show();
    }

模态如下：

<div class="modal fade" id="huhn-scale-modal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" style="width:750px">
            <div class="modal-header">

            </div>
            <div class="modal-body">
                <div class="page-title" data-bind="text:modalTitle"> </div>
                <div id="huhn-grid-container" class="knockout">
                    <table id="mDataTable" data-cols-num="5" class="table" aria-describedby="mDataTable_info">
                        <thead>
                            <tr class="search-cols" style="display: none;" role="row"></tr>
                            <tr class="actions-row" role="row">
                                <td class="header-action-row" style="border:none; cursor:default;" colspan="11">
                                    <h5 class='datatable-title'><span class='fa fa-list'></span>&nbsp; Lista Huhn skale</h5>
                                </td>
                            </tr>
                            <tr>
                                <th style="width: 33%;" data-bind="click: function () {huhnDataRefreshData(1,1)}, css: huhnDataUserNameIcon">@SharedResources.Index.Employee</th>
                                <th style="width: 33%;" data-bind="click: function () {huhnDataRefreshData(1,2)}, css: huhnDataDateAndTimeIcon">@SharedResources.Index.Date</th>
                                <th style="width: 33%;" data-bind="click: function () {huhnDataRefreshData(1,3)}, css: huhnDataCalculateIcon">@SharedResources.Index.Risk</th>
                            </tr>
                        </thead>
                        <tr data-bind="visible: huhnData() == null || huhnData().length < 1">
                            <td data-bind="attr: { 'colspan': 4 }"> <div class="alert alert-warning" role="alert"> @SharedResources.Index.NoData</div></td>
                        </tr>
                        <tbody data-bind="foreach: huhnData">
                            <tr style="cursor:pointer;" data-bind="click :$parent.huhnDataSelectRow.bind($data,$index()),
                           css: { 'row-selected': $parent.huhnDataSelectedRowPosition() != null && $index() == $parent.huhnDataSelectedRowPosition() }">
                                <td data-bind="text: UserName, click: $root.huhnDataDetails"> </td>
                                <td data-bind="text: DateAndTime, click: $root.huhnDataDetails"></td>
                                <td data-bind="text: CalculateRisk, click: $root.huhnDataDetails"></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="row">
                        <div class="col-sm-9">
                            <ul class="pagination pagination-sm" style="margin: 0">
                                <li data-bind="css: { disabled:  huhnDataCurrentPage() == 1 }, visible: huhnDataTotalPages() > 0" class="page-link disabled">
                                    <a data-bind="click: huhnDataCurrentPage() > 1 ? huhnDataRefreshData.bind($data, 1, null) : null, style: { cursor: huhnDataCurrentPage() == 1 ? 'not-allowed' : 'pointer' }">&laquo;</a>
                                </li>
                                <li data-bind="css: { disabled:  huhnDataCurrentPage() == 1 }, visible: huhnDataTotalPages() > 0" class="page-link disabled">
                                    <a data-bind="click: huhnDataCurrentPage() > 1 ? huhnDataRefreshData.bind($data, huhnDataCurrentPage()-1, null) : null, style: { cursor: huhnDataCurrentPage() == 1 ? 'not-allowed' : 'pointer' }">&lsaquo;</a>
                                </li>
                                <!-- ko foreach: new Array(huhnDataTotalPages()) -->
                                <li class="page-item" data-bind="css: { active:  $index()+1 == $parent.huhnDataCurrentPage() }, visible: $index()+1 < $parent.huhnDataCurrentPage()+3 && $index()+1 > $parent.huhnDataCurrentPage()-3">
                                    <a href="#" class="page-link" data-bind="text: $index()+1, click: $parent.huhnDataRefreshData.bind($data,$index()+1, null)"></a>
                                </li>
                                <!-- /ko -->
                                <li data-bind="css: { disabled:  huhnDataCurrentPage() == huhnDataTotalPages() }, visible: huhnDataTotalPages() > 0 " class="page-link">
                                    <a data-bind="click: huhnDataCurrentPage() < huhnDataTotalPages() ? huhnDataRefreshData.bind($data, huhnDataCurrentPage()+1, null) : null, style: { cursor: huhnDataCurrentPage() == huhnDataTotalPages() ? 'not-allowed' : 'pointer' }">&rsaquo;</a>
                                </li>
                                <li data-bind="css: { disabled:  huhnDataCurrentPage() == huhnDataTotalPages() }, visible: huhnDataTotalPages() > 0 " class="page-link">
                                    <a data-bind="click: huhnDataCurrentPage() < huhnDataCurrentPage() ? huhnDataRefreshData.bind($data, huhnDataTotalPages(), null) : null, style: { cursor: huhnDataCurrentPage() == huhnDataTotalPages() ? 'not-allowed' : 'pointer' }">&raquo;</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-3">
                            <span class="pull-right"> @SharedResources.Index.Record <span data-bind="text: huhnDataTotalItems"></span> </span>
                        </div>
                    </div>
                </div>
                <br />
                <div id="details-huhn-container" class="form-horizontal details-content">
                    <div class="row clearfix row-panel-sameheight">
                        <div class="col-md-6 row-panel-sameheight">
                            <div class="card panel-info panel-samewidth mb-4">
                                <div class="card-header">
                                    <h3 for="ageGroups" class="card-title">
                                        @SharedResources.Index.AgeGroups
                                        <i class="fa fa-info-circle info-right scaleToolTip" aria-hidden="true" data-toggle="tooltip" title="<b>80:</b></br>@SharedResources.Index.ThirdDegreeOfRisk.</br></br><b>70-79:</b></br>@SharedResources.Index.SecondDegreeOfRisk.</br></br><b>60-69:</b></br>@SharedResources.Index.FirstDegreeOfRisk."></i>
                                    </h3>
                                </div>
                                <div class="card-body" id="age">
                                    <input name="ageGroups" type="radio" data-bind="checked: ageGroups, checkedValue: 0" disabled /> @SharedResources.Index.Nothing<br />
                                    <input name="ageGroups" type="radio" data-bind="checked: ageGroups, checkedValue: 3" disabled /> 80<br />
                                    <input name="ageGroups" type="radio" data-bind="checked: ageGroups, checkedValue: 2" disabled /> 70-79<br />
                                    <input name="ageGroups" type="radio" data-bind="checked: ageGroups, checkedValue: 1" disabled /> 60-69
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 row-panel-sameheight">
                            <div class="card panel-info panel-samewidth mb-4">
                                <div class="card-header">
                                    <h3 for="stateOfMind" class="card-title">
                                        @SharedResources.Index.MentalState
                                        <i class="fa fa-info-circle info-right scaleToolTip" aria-hidden="true" data-toggle="tooltip" title="<b>@SharedResources.Index.PartlyConfusedTrashDisoriented:</b></br>@SharedResources.Index.FourthDegreeOfRisk</br></br><b>@SharedResources.Index.ConfusedTrashDisoriented:</b></br>@SharedResources.Index.SecondDegreeOfRisk."></i>
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <input name="mentalState" type="radio" data-bind="checked: mentalState, checkedValue: 0" /> @SharedResources.Index.Nothing <br />
                                    <input name="mentalState" type="radio" data-bind="checked: mentalState, checkedValue: 4" /> @SharedResources.Index.PartlyConfusedTrashDisoriented1<br />
                                    <input name="mentalState" type="radio" data-bind="checked: mentalState, checkedValue: 2" /> @SharedResources.Index.ConfusedTrashDisoriented1
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row clearfix row-panel-sameheight">


                        <div class="col-md-6 row-panel-sameheight">
                            <div class="card panel-info panel-samewidth mb-4">
                                <div class="card-header">
                                    <h3 for="stateOfMind" class="card-title">
                                        @SharedResources.Index.PerformPhysiologicalNeeds
                                        <i class="fa fa-info-circle info-right scaleToolTip" aria-hidden="true" data-toggle="tooltip" title="<b>@SharedResources.Index.IncontinenceOfUrineAndStool:</b></br>@SharedResources.Index.FourthDegreeOfRisk</br></br><b>@SharedResources.Index.TheirPhysiologicalNeedsButWithTheConstantNeedAssistanceToUseTheToilet:</b></br>@SharedResources.Index.ThirdDegreeOfRisk.</br></br><b>@SharedResources.Index.UrinaryCatheter:</b></br>@SharedResources.Index.FirstDegreeOfRisk."></i>
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <input name="performPhysiologicalNeeds" type="radio" data-bind="checked: performPhysiologicalNeeds, checkedValue: 0" /> @SharedResources.Index.Nothing <br />
                                    <input name="performPhysiologicalNeeds" type="radio" data-bind="checked: performPhysiologicalNeeds, checkedValue: 4" /> @SharedResources.Index.IncontinenceOfUrineAndStool1<br />
                                    <input name="performPhysiologicalNeeds" type="radio" data-bind="checked: performPhysiologicalNeeds, checkedValue: 3" /> @SharedResources.Index.TheirPhysiologicalNeedsButWithTheConstantNeedAssistanceToUseTheToilet1<br />
                                    <input name="performPhysiologicalNeeds" type="radio" data-bind="checked: performPhysiologicalNeeds, checkedValue: 1" /> @SharedResources.Index.UrinaryCatheter1
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 row-panel-sameheight">
                            <div class="card panel-info panel-samewidth mb-4">
                                <div class="card-header">
                                    <h3 for="stateOfMind" class="card-title">
                                        @SharedResources.Index.PreviousHistoryOfDowns
                                        <i class="fa fa-info-circle info-right scaleToolTip" aria-hidden="true" data-toggle="tooltip" title="<b>@SharedResources.Index.FromHistoryHadMoreThanThreeFalls:</b></br>@SharedResources.Index.FourthDegreeOfRisk</br></br><b>@SharedResources.Index.FromHistoryHadOneOrTwoFall:</b></br>@SharedResources.Index.SecondDegreeOfRisk."></i>
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <input name="previousFallsOfAnamnesis" type="radio" data-bind="checked: previousFallsOfAnamnesis, checkedValue: 0" /> @SharedResources.Index.Nothing <br />
                                    <input name="previousFallsOfAnamnesis" type="radio" data-bind="checked: previousFallsOfAnamnesis, checkedValue: 4" /> @SharedResources.Index.FromHistoryHadMoreThanThreeFalls1<br />
                                    <input name="previousFallsOfAnamnesis" type="radio" data-bind="checked: previousFallsOfAnamnesis, checkedValue: 2" /> @SharedResources.Index.FromHistoryHadOneOrTwoFall1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row clearfix row-panel-sameheight">

                        <div class="col-md-6 row-panel-sameheight">
                            <div class="card panel-info panel-samewidth mb-4">
                                <div class="card-header">
                                    <h3 for="dresingDisrobing" class="card-title">
                                        @SharedResources.Index.LevelOfPhysicalActivity
                                        <i class="fa fa-info-circle info-right scaleToolTip" aria-hidden="true" data-toggle="tooltip" title="<b>@SharedResources.Index.DifficultyInStandingAndWalkingFromTheBedToTheChairWheelchair:</b></br>@SharedResources.Index.FourthDegreeOfRisk</br></br><b>@SharedResources.Index.RequiredAssistanceInGettingOutOfBed:</b></br>@SharedResources.Index.ThirdDegreeOfRisk.</br></br><b>@SharedResources.Index.SelfRegularlyGetsUpAndWalksToTheToiletAndBathroom:</b></br>@SharedResources.Index.FirstDegreeOfRisk."></i>
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <input name="levelOfPhysicalActivity" type="radio" data-bind="checked: levelOfPhysicalActivity, checkedValue: 0" /> @SharedResources.Index.Nothing <br />
                                    <input name="levelOfPhysicalActivity" type="radio" data-bind="checked: levelOfPhysicalActivity, checkedValue: 4" /> @SharedResources.Index.DifficultyInStandingAndWalkingFromTheBedToTheChairWheelchair1<br />
                                    <input name="levelOfPhysicalActivity" type="radio" data-bind="checked: levelOfPhysicalActivity, checkedValue: 3" /> @SharedResources.Index.RequiredAssistanceInGettingOutOfBed1<br />
                                    <input name="levelOfPhysicalActivity" type="radio" data-bind="checked: levelOfPhysicalActivity, checkedValue: 1" /> @SharedResources.Index.SelfRegularlyGetsUpAndWalksToTheToiletAndBathroom1
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 row-panel-sameheight">
                            <div class="card panel-info panel-samewidth mb-4">
                                <div class="card-header">
                                    <h3 for="stateOfMind" class="card-title">
                                        @SharedResources.Index.DisordersOfBalanceWithMovementWalking
                                        <i class="fa fa-info-circle info-right scaleToolTip" aria-hidden="true" data-toggle="tooltip" title="<b>@SharedResources.Index.TheInstabilityWhenStandingAndWalking:</b></br>@SharedResources.Index.FourthDegreeOfRisk</br></br><b>@SharedResources.Index.OrthostaticDisturbancesCirculationDisorders:</b></br>@SharedResources.Index.ThirdDegreeOfRisk.</br></br><b>@SharedResources.Index.WalkingIsPossibleOnlyWithUseOrthopedicDevices:</b></br>@SharedResources.Index.SecondDegreeOfRisk.</br></br><b>@SharedResources.Index.SelfStandingUpAndWalking:</b></br>@SharedResources.Index.FirstDegreeOfRisk."></i>
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <input name="balanceIDisordersnMovement" type="radio" data-bind="checked: balanceIDisordersnMovement, checkedValue: 0" /> @SharedResources.Index.Nothing <br />
                                    <input name="balanceIDisordersnMovement" type="radio" data-bind="checked: balanceIDisordersnMovement, checkedValue: 4" /> @SharedResources.Index.TheInstabilityWhenStandingAndWalking1<br />
                                    <input name="balanceIDisordersnMovement" type="radio" data-bind="checked: balanceIDisordersnMovement, checkedValue: 3" /> @SharedResources.Index.OrthostaticDisturbancesCirculationDisorders1<br />
                                    <input name="balanceIDisordersnMovement" type="radio" data-bind="checked: balanceIDisordersnMovement, checkedValue: 2" /> @SharedResources.Index.WalkingIsPossibleOnlyWithUseOrthopedicDevices1 <br />
                                    <input name="balanceIDisordersnMovement" type="radio" data-bind="checked: balanceIDisordersnMovement, checkedValue: 1" /> @SharedResources.Index.SelfStandingUpAndWalking1
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="row clearfix row-panel-sameheight">

                        <div class="col-md-6 row-panel-sameheight">
                            <div class="card panel-info panel-samewidth mb-4">
                                <div class="card-header">
                                    <h3 for="dresingDisrobing" class="card-title">
                                        @SharedResources.Index.Medicines
                                        <i class="fa fa-info-circle info-right scaleToolTip" aria-hidden="true" data-toggle="tooltip" title="<b>@SharedResources.Index.TheUserReceivesThreeOrMoreDrugs:</b></br>@SharedResources.Index.FourthDegreeOfRisk</br></br><b>@SharedResources.Index.TheUserReceivesTwoDrugs:</b></br>@SharedResources.Index.ThirdDegreeOfRisk.</br></br><b>@SharedResources.Index.TheUserReceivesOneDrug:</b></br>@SharedResources.Index.SecondDegreeOfRisk."></i>
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <input name="medicaments" type="radio" data-bind="checked: medicaments, checkedValue: 0" /> @SharedResources.Index.Nothing <br />
                                    <input name="medicaments" type="radio" data-bind="checked: medicaments, checkedValue: 4" /> @SharedResources.Index.TheUserReceivesThreeOrMoreDrugs1<br />
                                    <input name="medicaments" type="radio" data-bind="checked: medicaments, checkedValue: 3" /> @SharedResources.Index.TheUserReceivesTwoDrugs1<br />
                                    <input name="medicaments" type="radio" data-bind="checked: medicaments, checkedValue: 2" /> @SharedResources.Index.TheUserReceivesOneDrug1
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 row-panel-sameheight">
                            <div class="card panel-info panel-samewidth mb-4">
                                <div class="card-header">
                                    <h3 for="stateOfMind" class="card-title">
                                        @SharedResources.Index.Alcohol
                                        <i class="fa fa-info-circle info-right scaleToolTip" aria-hidden="true" data-toggle="tooltip" title="<b>@SharedResources.Index.Regularly:</b></br>@SharedResources.Index.FourthDegreeOfRisk</br></br><b>@SharedResources.Index.Irregularly:</b></br>@SharedResources.Index.SecondDegreeOfRisk."></i>
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <input name="alcohol" type="radio" data-bind="checked: alcohol, checkedValue: 0" /> @SharedResources.Index.Nothing <br />
                                    <input name="alcohol" type="radio" data-bind="checked: alcohol, checkedValue: 4" /> @SharedResources.Index.Regularly<br />
                                    <input name="alcohol" type="radio" data-bind="checked: alcohol, checkedValue: 2" /> @SharedResources.Index.Irregularly1
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer" style="margin: 0 auto;">
                    <button type="button" id="btnSelectHuhn" class="btn" data-bind="click: selectModal"> @SharedResources.Index.SelectExisting</button>
                    <button type="button" id="btnNewHuhn" class="btn" data-bind="click: addNew"> @SharedResources.Index.AddNew</button>
                    <button type="button" class="btn" id="btnHuhnOk" data-dismiss="modal" data-bind="click: okModal"><em class="fa fa-check"></em> @SharedResources.Index.OkButton</button>
                    <button type="button" class="btn" data-dismiss="modal" data-bind="click: cancelModal">@SharedResources.Index.Cancel</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@System.Web.Optimization.Scripts.Render("~/bundles/huhn-skale-modal")
<script>
    $(function () {
        //initialize
        app.SharedHuhnScaleModal.Init(@ViewBag.Mode ,@ViewBag.ResidentId);
        $('[data-toggle="tooltip"]').tooltip({
            placement: 'left',
            html: true
        });
    });
</script>

关闭模态窗口后如何摆脱模态背景？只是没有意义，因为当我使用Bootstrap 3时，它曾经可以完美地工作，但是突然之间，它在Bootstrap 4上不起作用。