javascript - 关闭一个后重新打开模式，laravel

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(); 
})

您不应该包含这些，因为它会做的是，如果模式关闭/隐藏，它将再次隐藏模式。这是没有意义的，因为模式已经很接近了。这可能就是它扰乱模式显示/隐藏的原因。

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