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

【问题标题】：blank screen on close of modal appears sometimes有时会出现关闭模式时的空白屏幕
【发布时间】：2017-09-14 09:15:09
【问题描述】：

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

【问题讨论】：

能否请您添加一个小提琴，以便我们看到它工作正常？
这是 django..我试图添加小提琴，但它没有出现
它是 .modal-fade 中的错字吗？

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

通常，当显示模式时，背景或包装（黑屏）也会显示在其后面。尝试像这样在您的函数中删除该背景：

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

【讨论】：

这对我有用，因为它可以移除背景，但屏幕现在被锁定在适当的位置并且滚动被禁用。
从容器中移除溢出的css属性（body等）
建议here 修复了它； $('body').removeClass('modal-open');
如果有人遇到同样的问题：我的问题是调用“隐藏”，尽管模式没有显示。为了避免这种情况，我将 hide cmd 放在 if 中，如下所示：if($('#myPopup').hasClass('in')) {$('#myPopup').modal('hide');} 这解决了我的黑屏问题

【解决方案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");

【讨论】：

@divya，这是黑色覆盖不消失的情况吗？这解决了问题吗？
谢谢！！我考虑了你的观点并使用了 .modal ......但它没有解决问题......使用 $(".modal-backdrop").remove() 正如@navjotahuja92 提到的那样解决了问题
哦，好的@divya。很乐意提供帮助。
您应该使用 modal() 方法来显示/隐藏，因为它们不仅仅是.hide()。对于将来遇到相同问题的任何人，$(".modal").modal("hide") 是隐藏 boostrap 模态的正确方法。

【解决方案3】：

我已经尝试了上述解决方案，但是在使用上述方法关闭弹出窗口后，您将无法再次获得弹出窗口。当您再次单击按钮以显示弹出窗口时，它将显示黑屏

以下解决方案正好适合我。

   $("#myModal .close").click();

   $("#myModal .close").trigger("click");

【讨论】：