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

Question

我有一个动态创建的表格，每行都有按钮...如果我单击按钮，模式将打开以输入模式后面有黑屏的详细信息。单击接受按钮时，模式将关闭，并且黑屏必须消失..它有时会消失，但在其他情况下不会消失。 这就是在模式中单击接受按钮后我的屏幕有时会出现的情况
出现的屏幕 : /image/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();
)}