模态关闭时有时会出现黑屏 [英] blank screen on close of modal appears sometimes

问题描述

我有一个动态创建的表，每行都有一个按钮...如果单击按钮，则会打开一个模态，以在模态后面显示暗屏的详细信息.单击接受按钮时，模态会关闭，并且暗屏必须消失..它有时会消失，在其他情况下则不会消失. 这是我的屏幕有时在模态下单击接受按钮后出现的方式
出现的画面 : https://i.stack.imgur.com/wWnS8.jpg

I have a dynamically created table with buttons in each row...If I click on the button a modal opens to enter the details with dark screen behind modal..On Click of accept button the modal closes and the dark screen must disappear..It disappears sometimes and not in other situations. This is how my screen appears sometimes after click of accept button in modal
Screen that appears : 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中:

In my Jquery:

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

推荐答案

通常，当显示模式时，背景或包装纸(黑屏)也会显示在其后面. 尝试像这样删除函数中的背景幕:

Usually, when a modal is shown a backdrop or wrapper (dark screen) is also shown behind it. Try removing that backdrop in your function like this:

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

这篇关于模态关闭时有时会出现黑屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！