2017-01-26 4 views
1

Wenn ich mein Bootstrap Modal schließe, öffnet sich das Modal erneut, dann verstecke ich mich und der Hintergrund bleibt dunkel. Ich öffne das Modal beim Klick auf den Tisch tr. Ich habe auch versucht, modales Fell zu erzwingen, aber es hat nicht funktioniert. Bitte jede Hilfe wird funktionieren.Erneutes Öffnen nach dem Schließen, Laravel

<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> 
+0

Verwenden Sie eine On-Click-Ereignisfunktion, um das Modal zu schließen? –

+0

Ich habe versucht, auf Click-Ereignis zu verwenden, wie Sie hier sehen können. $ ('. EditTaskModal'). On ('verdeckt.bs.modal', function() { $ \t $ ('. EditTaskModal') .modal ('verbergen'); \t $ ('body'). RemoveClass ('modal-open'); \t $ ('. modal-background'). remove(); \t}) – Epsilon47

+0

Ok, kannst du das entfernen und sehen, was passiert? Ich habe meine Antwort unten aufgeführt und erklärt. –

Antwort

0

Es scheint, dass Sie ein Onclick-Ereignis haben, die ausgelöst wird, wenn der close Link, um die modalen zu schließen wird klicken.

Diesbezügliche:

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

Es gibt keine Notwendigkeit, das zu tun, da es ein Attribut, das die modalen schließen würde.

Also ich schlage vor, ändern Sie Ihren Code oben und tun Sie unten und sehen, wie es funktioniert.

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

aktualisieren

Ok ich Ihr JS-Code sehen:

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

Sie diese nicht enthalten sollte, da das, was es tun würde ist, wenn die modale Nähe/versteckt wird es Verstecke das Modal erneut. Was nicht sinnvoll ist, da das Modal bereits nahe ist. Das könnte der Grund sein, warum es das modale Aufdecken/Verstecken durcheinander bringt.

Also entfernen Sie das und sehen was passiert.

+0

Ich habe versucht, es zu tun, aber es hat leider nicht funktioniert. Das Modal verbirgt sich, aber Hintergrund steht verdunkelt. Ich habe bemerkt, dass jede Aktion, die ich mit modalen Wiederholungen mache, die modalen Wiederholungen öffnen und schließen, als würde ich das Ereignis verschachteln oder etwas. – Epsilon47

+0

@ Epsilon47 Kannst du 'editTaskModal' als Klasse auf deinem modalen Element entfernen. Wahrscheinlich könnte etwas das Problem auf dem JS auslösen. –

0

Danke, ich habe das Problem gefunden. Ich hatte mein modal in tr und ich hatte auch die modale Eröffnung auf tr-Klick ausgelöst und als ich versuchte, das Modal zu entlassen, wiederholte sich das Ereignis.

Verwandte Themen