Question

我在MVC项目的部分视图中有以下代码：

$(document).ready(function () {
    $("#@Html.IdFor(m => m.AanwezigheidChauffeurID)").change(function () {
        setModalBody("busy", "Even geduld, de gegevens worden opgehaald...");
        $("#modalDialog").modal({ keyboard: false, backdrop: "static" });

        var chauffeurRequest = $.ajax({
            url: '@Url.Action("GetAanwezigheid", "Invoer")',
            data: { id: $("#@Html.IdFor(m => m.AanwezigheidChauffeurID)").val() },
            async: true,
            cache: false,
            type: "POST"
        });

        chauffeurRequest.done(function (data, textStatus, jqXHR) {
            $("#entriesDiv").empty();
            $("#entriesDiv").append(data);
            $(".hoursInput:first").trigger("change");
            $("#modalDialog").modal("hide");
        });

        chauffeurRequest.fail(function (request, textStatus, errorThrown) {
            setModalBody("error");
        });           
    });
});

这是模式的标记：

<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalDialogLabel">Xwift</h5>
                <button type="button" class="close closeModalButton" data-dismiss="modal" aria-label="Sluiten">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="modal-dialog-body" class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" id="closeModalButton" disabled class="btn btn-primary closeModalButton" data-dismiss="modal">Sluiten</button>
            </div>
        </div>
    </div>
</div>

情况：

$("#@Html.IdFor(m => m.AanwezigheidChauffeurID)")指的是 select 元素。当我更改下拉菜单的值时，将启动AJAX请求并显示模式对话框。请求完成后，通过调用$("#modalDialog").modal("hide");关闭模式。

现在，当我再次更改下拉菜单的值时，将再次启动请求，并再次显示模式。请求完成后，我可以从模态的背景中看到DOM中的更改，但是模态将不再关闭。当我在控制台中调用行$("#modalDialog").modal("hide");进行测试时，模态会关闭。

是否由于某些原因无法关闭第二，第三或更长时间？

Answer 1

太糟糕了，我已经问过这个问题，然后才能在StackOverflow上找到以下问题：Bootstrap 4 Modal Not Closing Properly On Hide

几个评论和答案都涉及到fade类破坏了模式的整个隐藏的事实。我尝试过删除此类，它也对我有用。可悲的是，我没有找到原因。

Bootstrap模式不会从JS代码第二次关闭

1 个答案: