Question

当我关闭我的引导模态时，模态再次打开，然后隐藏，背景保持变暗。我点击表tr打开模态。我也试图强制模态隐藏，但它没有用。请任何帮助都可以。

<tr class="task-row task-row-{{$v_task->id}}" data-id="{{$v_task->id}}" data-target="#editTaskModal-{{$v_task->id}}">

<div id="editTaskModal-{{$v_task->id}}" class="modal fade editTaskModal" role="dialog" data-id="{{$v_task->id}}">
                <input type="hidden" name="_method" value="put">
                  <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">{{$v_task->task_name}}</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <div class="row">
                                    <label for="listNameInput" class="col-sm-2">Name:</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="taskNameName" class="form-control" placeholder="Your task name..." id="taskNameInput-{{$v_task->id}}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <label for="listPriorityInput" class="col-sm-2">Priority:</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="taskNamePriority" class="form-control" placeholder="Your priority..." id="taskPriorityInput-{{$v_task->id}}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <label for="listDeadlineInput" class="col-sm-2">Deadline:</label>
                                    <div class="col-sm-10">
                                        <div class="input-group datetimepicker2">
                                            <input type="datetime" name="taskNameDeadline" class="form-control deadlineInput" placeholder="Deadline..." id="taskDeadlineInput-{{$v_task->id}}">
                                            <div class="input-group-addon calendar-div">
                                                <span class="fa fa-calendar-o"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                         </div>
                         <div class="modal-footer">
                            <button type="submit" class="btn btn-success updateTaskModalBtn" data-dismiss="modal">Update</button> or
                            <a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
                        </div>
                    </div>
                  </div>
                </div>

Answer 1

您似乎有一个onclick事件，当close链接单击以关闭模式时会触发该事件。

参考：

<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>

没有必要这样做，因为有一个属性可以关闭模态。

所以我建议您更改上面的代码并在下面进行操作，看看它是如何工作的。

<a data-dismiss="modal">Close</a>

<强>更新

好的，我看到你的JS代码：

$('.editTaskModal').on('hidden.bs.modal', function () {     
  $('.editTaskModal').modal('hide'); 
  $('body').removeClass('modal-open'); 
  $('.modal-backdrop').remove(); 
})

你不应该包括这些，因为它会做的是，如果模态是关闭/隐藏它将再次隐藏模态。由于模态已经接近，因此没有意义。这可能就是为什么它搞乱模式揭示/隐藏的原因。

所以删除它，看看会发生什么。

Answer 2

谢谢，我发现了问题。我在tr中使用了我的模态，并且我也在tr点击时触发了模态开启，当我试图解除模态时，事件重复打开。

关闭一个，laravel后重新打开模态

2 个答案: