Django-Bootstrap：表单模式关闭按钮不起作用

Question

customer.html就像我的索引页。 在这里，我创建了一个按钮，该按钮显示了模态类以及带有“模态淡入”类的

customer.html

<div class="m-portlet__head-tools">
  <ul class="m-portlet__nav">
     <li class="m-portlet__nav-item">
        <div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover" aria-expanded="true">
           <a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
           <i class="la la-plus m--font-brand"></i>
           </a>
           <div class="m-dropdown__wrapper">
              <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
              <div class="m-dropdown__inner">
                 <div class="m-dropdown__body">
                    <div class="m-dropdown__content">
                       <ul class="m-nav">
                          <li class="m-nav__section m-nav__section--first">
                             <span class="m-nav__section-text ">Quick Actions</span>
                          </li>
                          <li class="m-nav__item">
                             <!-- The button which shows the modal, notice the href attribute -->
                             <a href="{% url 'customer_new' %}" class="m-nav__link " data-toggle="modal" data-target="#modal">
                                <i class="m-nav__link-icon flaticon-add"></i>
                                <span class="m-nav__link-text">Modal</span>
                             </a>
                          </li>
                          <li class="m-nav__separator m-nav__separator--fit m--hide">
                          </li>
                       </ul>
                    </div>
                 </div>
              </div>
           </div>
        </div>
     </li>
    </ul>
</div>
<div class="m-portlet__body">
<!--begin: Datatable -->
<!--begin:: Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true"></div>
<!--end:: Modal -->
</div>

customer_form.html包含模态对话框和我要使其工作的“关闭”按钮。 如您在下面看到的，我使用了data-dismiss =“ modal”，但是它不起作用。 当我单击它时，模式形式中没有任何动作。但是，如果我填写这些字段并按“保存”按钮，则数据将被写入数据库。

<h1>customer_form.html</h1>   
<!--Begin: Modal -->
<div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Add new customer</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
            </div>

            <div class="modal-body">
                <form action="{% url 'customer_new' %}" method="post" id="customer_new" class="form">
                    {% csrf_token %}
                    {{ form.media }}
                    {% for field in form.visible_fields %}
                    <fieldset class="form-group">
                        <label for="exampleInputEmail1">
                        {{ field.label_tag }}
                    </label>
                    {{ field|attr:"class:form-control" }}
                </fieldset>
                {% endfor %}
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="Save" />
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
<!--End: Modal -->
<script>
        var form_options = { target: '#modal', success: function(response) {} };
        $('#customer_new').ajaxForm(form_options);
    </script>
<script>
        $('#modal').on('show.bs.modal', function (event) {
            var modal = $(this)
            $.ajax({
               url: "{% url 'customer_new' %}",
               context: document.body
            }).done(function(response) {
               modal.html(response);
            });
        })
    </script> 

Views.py     

views.py

@login_required
def customer_list(request):
    customers = Customer.objects.all()
    return render(request, 'customer.html', {'customers': customers})

@login_required
def customer_new(request):
    form = CustomerForm(request.POST or None)
    if form.is_valid():
    form.save()
    return redirect('customer_list')
    return render(request, 'customer_form.html', {'form': form})

---