ルーベルを閉じた後にモーダルを再オープン

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

あなたがcloseリンクがモーダルを閉じるためにクリックされたときにトリガのonclickイベントを持っているようです。

これを参照：

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

モーダルを閉じてしまうの属性がありますので、それを行う必要はありません。

上記のコードを変更して、以下のようにして、どのように動作するかを確認することをおすすめします。

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

更新

私はあなたのJSコードを参照してくださいOK：

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

モーダルが近い/それは意志隠されている場合は何がどうなること、であるので、あなたは、これらを含めるべきではありません再びモーダルを非表示にする。モーダルはすでに閉じているので意味がありません。それは、それがモーダル公開/隠蔽を台無しにしている理由かもしれません。

それを削除して何が起こるかを確認してください。

Answer 2

ありがとう、私は問題を発見した。私は自分のモーダルをtrで持っていました。私はtrクリックでモーダルオープニングをトリガーしていました。そして、私がモーダルを却下しようとしていたときに、そのイベントが繰り返されました。