模式关闭后页面无响应

Question

A have a webapp developed with Spring boot and thymeleaf as front end. We display all the groups available to review. Once user clicks a group we list documents in it tabular form and once user clicks on and document we provide its details. All these I am handling through ajax call and defining on click method. Once user gets to detail section they are provided with more details on that document where they can go and modify or add more through modal. Below is the modal

      <!-- 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-->

And here is my save 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");
    }
});

}

}

The call to make modal open:

            <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>

And all this has been working fine. But sometimes all of sudden the whole page hangs up, I cant scroll I cant click on the links and have to refresh the page to continue. There are no errors on the console and have compare the response when the screen freeze and when it doesn't and there is no difference. At this point I am lost on where to look for and what could be the issue. Any directions will be appreciated.

Update: So I found that modal-open class was added but not getting remove when the screen froze, so I added below in my javascript. It does unable to page to scroll but all the links on the page are still disabled.

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

Alright, I found one more thing, below div element stays there whenever screen freeze. How can I found out which div element is this?

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

Any guidelines on how to close the modal appropriately?

Answer 1

Programmatically dismissing a Modal can be done using $('#editModal').modal('hide')

So either the modal is dismissed using the close or cancel button or from the Javascript using the method I shared.

Answer 2

I noticed that the below div element being added which is making screen freeze. I have to hide this through javascript.

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