我在django tempalate
中有以下模态对话框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 call
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或关闭按钮来解除。可能有什么不对?
答案 0 :(得分: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">