模式关闭后页面无响应

Question

A 有一个使用 Spring 引导和 thymeleaf 作为前端开发的 webapp。 我们显示所有可供审查的组。 一旦用户单击一个组，我们就会以表格的形式列出文档，一旦用户单击并记录我们就会提供其详细信息。 所有这些我都是通过 ajax 调用和定义点击方法来处理的。 一旦用户进入详细信息部分，他们将获得有关该文档的更多详细信息，他们可以在其中 go 并通过模式修改或添加更多信息。 下面是模态

      <!-- Modal start-->
    <div id="editModal" tabindex="-1" class="modal fade" role="dialog">
        <div class="modal-dialog" role="document">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="pTitle" class="modal-title">Edit</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row" id="firstNameRow">
                        <div class="form-group col-sm-12">
                            <label for="firstName" class="col-sm-4">First Name: </label>
                            <input class="col-sm-8" type="text" id="firstName" maxlength="32" onkeydown="return validateInputFields(this,event)"/>
                            <span class="text-danger" style="display:none;float: right;" id="firstNameError">First name is required.</span>
                        </div>
                    </div>
                    <div class="row" id="middleNameRow">
                        <div class="form-group col-sm-12">
                            <label for="middleName" class="col-sm-4">Middle Name: </label>
                            <input  class="col-sm-8" type="text" id="middleName" maxlength="32" onkeydown="return validateInputFields(this,event)"/>
                            <span class="text-danger" style="display:none;float: right;" id="middleNameError"></span>
                        </div>
                    </div>
                    <div class="row has-danger" id="lastNameRow">
                        <div class="form-group col-sm-12">
                            <label for="lastName" class="col-sm-4">Last Name: </label>
                            <input  class="col-sm-8 is-invalid" type="text" id="lastName" maxlength="32" onkeydown="return validateInputFields(this,event)" />
                            <div class="text-danger" style="display:none;float: right;" id="lastNameError" >Last name is required.</div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"  class="btn btn-primary" th:onclick="'save();'" id="saveButton"  data-backdrop="false" data-keyboard="false">Save</button>
                    <button type="button" class="btn btn-neutral" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <!--Modal end-->

这是我保存的 function：

       function saveParty(){
var hasError = validateParty();
if(!hasError){
    //To close the modal and get back to the previous screen
    document.getElementById("saveButton").setAttribute("data-dismiss","modal");
    var data = loadPartyDetails();
    var objectID = $("#objectID").val();
    $.ajax({
    type : "POST",
    contentType: "application/json",
    url: "/saveDetails/" + objectID + "/",
    data: JSON.stringify(data),
    timeout : 100000,
    success : function(result) {
        $("#detailsPanel").html(result);
        document.getElementById("successMsgParties").style.display="";
        $('#successMsgParties').delay(5000).fadeOut('slow');
    },
    error : function(e) {
        console.log("ERROR: ", e);
    },
    done : function(e) {
        console.log("DONE");
    }
});

}

}

使模态打开的调用：

            <td class="text-center"><a th:id="${iter.index + 1}" onclick="populateModal(this);" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#editModal"></a></td>

所有这一切都运行良好。 但有时突然整个页面都挂了，我不能滚动我不能点击链接，必须刷新页面才能继续。 控制台上没有错误，并且比较了屏幕冻结和没有冻结时的响应，并且没有区别。 在这一点上，我迷失了在哪里寻找以及可能是什么问题。 任何方向将不胜感激。

更新：所以我发现添加了 modal-open class 但在屏幕冻结时没有被删除，所以我在下面添加了我的 javascript。 它确实无法滚动页面，但页面上的所有链接仍然被禁用。

      $("body").removeClass("modal-open");

好吧，我又发现了一件事，只要屏幕冻结，下面的 div 元素就会停留在那里。 我怎样才能知道这是哪个 div 元素？

    <div class="modal-backdrop fade show"></div>

关于如何适当关闭模式的任何指南？

Answer 1

可以使用$('#editModal').modal('hide')以编程方式解除 Modal

因此，要么使用关闭或取消按钮关闭模式，要么使用我共享的方法从 Javascript 关闭模式。

Answer 2

我注意到添加了以下 div 元素，这使屏幕冻结。 我必须通过 javascript 隐藏它。

                  <div class="modal-backdrop fade show"></div>