[英]modal doesn't show up but grey background appears on click of button
我有一个动态创建的表,每行显示的单击查看按钮都会显示一个灰色屏幕,但模型无法打开..我尝试了很多,但不了解问题所在。我使用了https: //simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html他的代码作为参考。
请帮我...
m_manage.html ---这里我声明了模式并包含了页面
<div class="panel-body">
<table class="table table-hover" id="table">
<tbody>
{% include 'm_manage/partial_m_manage.html' %}
</tbody>
</table>
</div>
<div class="modal fade" id="modal-leave">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
partial_m_manage.html:它包含表中的列
{% for pl in pending_leaves %}
<tr>
<td><button type="button" class="btn btn-default btn-sm view" data-url="{% url 'm_manage:leave_view' pl.id %}" data-target="#{{pl.id}}_3"><i class="fa fa-eye" aria-hidden="true" style="color:black"></i></button>
</td>
</tr>
{% endfor %}
js ----单击按钮即可调用
$("#table").on('click', '.view', function (e) {
var btn = $(this);
console.log(btn);
var url= btn.attr("data-url");
console.log(url);
$.ajax({
// url: '/m_manage/leave_view/',
url: btn.attr("data-url"),
dataType: 'json',
type: 'get',
beforeSend: function () {
$("#modal-leave").modal("show");
},
success: function (data) {
console.log('You Did it!!!!');
$("#modal-leave .modal-content").html(data.html_form);
}
});
});
views.py--
def leave_view(request,pk):
Leave = get_object_or_404(leave, pk=pk);
data=dict()
if request.method == 'POST':
data['html_form']= render_to_string('m_manage/view_modal.html',{'Leave':Leave}, request=request)
return JsonResponse(data)
view_modal.html ---我正在渲染一个新页面,即模式
<form method="post" action="{% url 'm_manage:leave_view' Leave.id %}" class="js-leave-view-form">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Do you want to accept {{Leave.id}} leave</h4>
</div>
<div class="modal-body">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create book</button>
</div>
</form>
但是会出现黑屏,并且所有值都可以在控制台中成功打印,但不会出现模式弹出窗口...
请帮我... :(
您应该包括“ bootstrap.min.css”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.