Javascript 模式关闭后页面无响应

有一个用Spring boot和thymeleaf前端开发的webapp。 我们将显示所有可供查看的组。一旦用户单击一个组，我们将以表格形式列出文档，一旦用户单击并记录，我们将提供其详细信息。所有这些我都是通过ajax调用和定义点击方法来处理的。一旦用户进入“详细信息”部分，他们将获得有关该文档的更多详细信息，可以通过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-->

}

使模态打开的调用：

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

好的，我还发现了一件事，每当屏幕冻结时，div元素就在下面。如何找出这是哪个div元素

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

---

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

可以使用

$（'#editmodel'）.model（'hide'）

---

因此，要么使用close或cancel按钮取消模式，要么使用我共享的方法从Javascript中取消模式

我注意到下面添加的div元素使屏幕冻结。我必须通过javascript隐藏这一点

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

听起来好像某个地方还留着背景。。。右键单击单击不起作用的部分，然后检查“Inspect”是否有什么要说的。它可能会找到一个全屏div，它涵盖了所有内容，并且没有因为某种原因而被隐藏。不确定是否是这样，只是一种感觉。这看起来像是引导。是否通过数据api事件打开模式？即，打开模式的按钮是否具有数据模式属性？无论哪种方式，您都无法正确关闭模式。@提示-它确实具有数据模式属性，是否有关于如何关闭模式的特定规则？在进行ajax调用之前，我会关闭它。@dkellner我会“检查”并检查div，当它工作时，以及当它看起来不一样时。@ILRNew看看div之外，模态背景往往位于主体内容的最开始或最结尾。保存完整的HTML并与WinMerge进行比较。如果这没用，也许我猜错了。

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

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