Bootstrap模式对话框忽略不起作用但提交按钮

Question

我有一个问题，我找不到答案。我有模态，其中包含一个表单，用于向服务器提交数据。提交部分工作得很好。发送所有数据，服务器采取正确的步骤。但是，关闭/关闭模式的按钮不起作用。该表单由来自服务器的ajax请求提取，并嵌入当前页面

<!-- Dialog for user input of forms-->
<div id="form-modal" class="modal fade" role="dialog">

</div>

Ajax拉式

<div class="modal-dialog" role="document">
    <!-- Content of dialog -->
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Datensatz erstellen</h4>
            <button type="button" class="close" data-dismiss="modal">&times

            </button>
        </div>
        <div class="modal-body">

            <form action="{% url 'knowledgeedit' %}" method="POST" id="">
                {% csrf_token %}
                {% for field in form %}
                    <div id="{{ field.auto_id }}_container">
                    {{ field.help_text }}
                    <div>
                        {{ field.label_tag }} {{ field }}
                    </div>
                {% endfor %}

                    </div>
                </form>
                <div class="modal-footer">
                    <button class="btn btn-success" type="submit" name="{{ requestedForm }}">Speichern</button>
                    <button class="btn btn-default" type="button" data-dismiss="modal">Abbrechen</button>
                </div>
        </div>
    </div>
</div>

的CSS：

body {
    font-family: 'Open Sans', serif;
    padding-top: 54px;
    color: #868e96;
}
.btn-primary{
  background-color: #bd5d38 !important;
  border-color: #868e96 !important;
}

/* Sections */



@media (min-width:992px) {
    body {
    padding-top: 0;
    padding-left: 17rem;
}
}h1, h2,h3,h4, h5, h6 {
    font-family: 'Saira Extra Condensed', serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #a25137;
}

h1 {
    font-size: 6rem;
    line-height: 5.5rem;
    color: #e78e3f
}
h2 {
    font-size: 3.5rem;
}
.subheading {
    font-weight: 500;
    font-family: 'Saira Extra Condensed', serif;
    font-size: 1.35rem;
    color: #0a0e14;
}
.list-social-icons a {
    color: #495057;
}
.list-social-icons a:hover {
    color: #bd5d38;
}
.list-social-icons a .fa-lg {
    font-size: 1.75rem;
}
.list-icons {
    font-size: 3rem;
}
.list-icons .list-inline-item i:hover {
    color: #bd5d38;
}
#sideNav .navbar-nav .nav-item .nav-link {
    font-weight: 600;
    text-transform: uppercase;
}
@media (min-width:992px) {
    #sideNav {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 17rem;
    height: 100vh;
}
#sideNav .navbar-brand {
    display: flex;
    margin: auto auto 0;
    padding: .5rem;
}
#sideNav .navbar-brand .img-profile {
    max-width: 10rem;
    max-height: 10rem;
    border: .5rem solid rgba(255, 255, 255, .2);
}
#sideNav .navbar-collapse {
    display: flex;
    align-items: flex-start;
    flex-grow: 0;
    width: 100%;
    margin-bottom: auto;
}
#sideNav .navbar-collapse .navbar-nav {
    flex-direction: column;
    width: 100%}
#sideNav .navbar-collapse .navbar-nav .nav-item {
    display: block;
}
#sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
    display: block;
}
}section.resume-section {
    border-bottom: 1px solid #dee2e6;
    padding-top: 5rem!important;
    padding-bottom: 5rem!important;
}
section.resume-section .resume-item .resume-date {
    min-width: none;
}
@media (min-width:768px) {
    section.resume-section {
    min-height: 100vh;
}
section.resume-section .resume-item .resume-date {
    min-width: 18rem;
}
}@media (min-width:992px) {
    section.resume-section {
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
}
}.bg-primary {
    background-color: #bd5d38!important;
}
.text-primary {
    color: #bd5d38!important;
}
a {
    color: #bd5d38;
}
a:active, a:focus, a:hover {
    color: #824027;
}