模态对话框不关闭引导程序

Question

我在 django 模板中有以下模态对话框

search_results.html

<div class="modal fade " id="search-results" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Search Results:</h3>
                <h5>Click on a customer to go to customer's file</h5>
            </div>
            <div class="modal-body">
                <table class="table table-responsive table-bordered table-hover table-condensed">
                    <thead>
                        <tr>
                            <th colspan="6">Patients found {{customers.count}}</th>
                        </tr>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Middle Name</th>
                            <th>Last Name</th>
                            <th>Phone No</th>
                            <th>Date of Birth</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%for customer in customers %}
                            <tr onClick="parent.location='{% url 'customer-edit' id=customer.id%}'">    
                                <td>{{forloop.counter}}</td>
                                <td>{{customer.first_name}}</td>
                                <td>{%if customer.middle_name%}{{customer.middle_name}}{%endif%}</td>
                                <td>{{customer.last_name}}</td>
                                <td>{{customer.telephone}}</td>
                                <td>{%if customer.birth_date%}{{customer.birth_date}}{%endif%}</td>
                            </tr>
                        {%empty%}
                            <tr>
                                <td colspan="6"><p class="text-center">No Patients Found</p></td>
                            </tr>
                        {%endfor%}
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button id="cancel" data-dismiss = "modal" class="btn btn-danger">Close</button>
            </div>
        </div><!--modal-content-->
    </div><!--modal-dialog-->
</div>

以及呈现此模板的视图

在我的网页中，我使用 ajax 发布搜索表单的数据，视图返回 html。然后我将模型对话框附加到页面上，并显示结果。

ajax 调用

var form = $(".search-patient");
$(".search-patient").on('submit', function(event){
    event.preventDefault();
    $.ajax({
        type:'post',
        url:'/customer/',
        dataType: 'html',
        data:form.serialize(),
        success: function (data, status, jqXHR){
            if ($("#search-results").length > 0){
                $("#search-results").remove();
            }//remove it if it was already there from previous search(Not the best way i know)

            $('body').append(data);
            $("#search-results").modal('show');
        }

    });
});

问题是，虽然它显示了模态框，但它不会让我通过使用 x 或关闭按钮来解雇。有什么问题？

Answer 1

试试这个$("#search-results").modal('hide');应该可以。

$('.close').click(function(){
     $("#search-results").modal('hide');
});

更新：

var loading_dialog = $('#search-results');
loading_dialog.modal('show');

 loading_dialog.modal('hide');

更新： 给class="modal hide fade"

<div class="modal fade " id="search-results" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">

替换为

<div class="modal hide fade " id="search-results" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">