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

Answer 3

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

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

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

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

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

3 个答案: