关闭模式下的空白屏幕有时会出现

Question

我有一个动态创建的表格，每行都有按钮...如果点击按钮，模式打开后会在模式后面输入黑屏的详细信息..点击接受按钮模式关闭，黑屏必须消失。有时会消失，而在其他情况下不会消失。 这是我的屏幕如何在模式接受按钮出现
屏的点击后有时会出现：https://i.stack.imgur.com/wWnS8.jpg

<td> 
<!-- for accepting --> 
<button type="button" class="btn btn-default btn-sm tick" data-toggle="modal" data-target="#{{pl.id}}_1" ><i class="fa fa-check" aria-hidden="true" style="color:green" onclick="remainingChar()"></i></button> 
<!-- Modal --> 
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Do You want to accept <b>{{pl.employee.emp_name|title }} </b> leave?</h4> 
      </div> 
      <form action={% url 'm_manage:accept' %} method="POST"> 
      {% csrf_token %} 
       <div class="modal-body"> 
        <p><input type="checkbox" name="email" id="email" class="email" > Notify Via Email<br></p> 
        <p><label for="message">Message</label> 
        <textarea rows="3" name="message" id="message" class="form-control input-md message" ></textarea></p> 
        <div id="textarea_feedback_{{pl.id}}" class="textarea_feedback"></div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength(this)" >Accept</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
       </form> 
      </div> 
     </div> 
    </div> 
    </td> 

在我的Jquery：

$(document).on('click','.accept', function(e){ 
$(".modal-fade").modal("hide"); 
)} 

Answer 1

通常，当一个模式显示背景或包装（黑屏）后面也显示。 尝试在你的函数类似这样的去除背景：

$(document).on('click','.accept', function(e){ 
    $(".modal-fade").modal("hide"); 
    $(".modal-backdrop").remove(); 
)} 

Answer 2

你用错了类选择应用代码，

<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}"> 

检入上面一行modal fade是两个不同的类别。你在jQuery代码中使用它。像这样：

$(".modal-fade").modal("hide"); 

所以尝试改变它与适当的类名称。这里你去：

$(".modal").modal("hide");