模态不显示，但单击按钮时出现灰色背景答案

【问题标题】：modal doesn't show up but grey background appears on click of button模态不显示，但单击按钮时出现灰色背景
【发布时间】：2018-03-02 14:11:42
【问题描述】：

我有一个动态创建的表格，点击每一行中的查看按钮时，它会显示一个灰色屏幕，但模型没有打开..我尝试了很多，但不明白问题出在哪里。我寻求帮助https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html 他的代码作为参考。

请帮帮我...

m_manage.html---这里我声明了modal并包含了页面

<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">&times;</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>

但是出现黑屏并且所有值都在控制台中成功打印但没有出现模式弹出窗口...

请帮帮我... :(

【问题讨论】：

我没有看完你给出的所有代码，但可能是你在 partial_m_manage.html 中缺少 {% endfor%}
对不起，它出现在我的代码中，但我没有放在这里
你完成了所有简单的比复杂的步骤，因为它看起来很长的路
我实现了他页面的删除书代码到我的视图叶子，因为功能相同。我什至下载了他的代码并且运行良好，但我不明白为什么我的弹出窗口没有出现
你是否检查过元素以查看 DOM 是否已更新？如果它一直在尝试调整 z-index。我曾经遇到过类似的问题

标签： javascript jquery django twitter-bootstrap

【解决方案1】：

您应该包含“bootstrap.min.css”。

【讨论】：

"

” - 在这里你应该有一个像这样的结尾 div -
如果我没记错的话，或者你忘了在你的问题中添加......

【解决方案2】：

我遇到了这个问题。原来是因为触发模态的按钮在被渲染的部分之前。我只是在 html 中切换了这两件事，即

<%= render 'some_modal' %>
<%= link_to 'Click here' %>

不是

<%= link_to 'Click here' %>
<%= render 'some_modal' %>

【讨论】：