Question

有一个使用Spring Boot和百里香前端开发的Web应用程序。我们显示所有可查看的组。用户单击一个组后，我们以表格形式列出文档，而用户单击并记录后，我们将提供其详细信息。我通过ajax调用处理所有这些并定义click方法。一旦用户进入详细信息部分，他们将获得有关该文档的更多详细信息，他们可以通过模态在其中进行修改或添加更多内容。下面是模态

      <!-- 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 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类，但是当屏幕冻结时并没有将其删除，因此我在javascript中添加了以下内容。它无法滚动页面，但页面上的所有链接仍被禁用。

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

好吧，我发现了另一件事，只要屏幕冻结，div元素下面都会停留在那。如何找出这是哪个div元素？

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

有关如何适当关闭模式的任何指导原则吗？

Answer 1

可以通过$('#editModal').modal('hide')

以编程方式消除模态

因此，可以使用“关闭”或“取消”按钮消除模态，或者使用我共享的方法从Javascript中消除模态。

Answer 2

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

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

模式关闭后页面无响应

2 个答案: