關閉模式下的空白屏幕有時會出現

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");