Bootstrap Modal с Ajax не отображается

Question

Использование bootstrap modal с Ajax для добавления пользователя, но при нажатии ссылки на экране потемнеет, но сам модальный не отображается, а в сети invite функция предварительного просмотра формы появляется, поэтому контроллер работает.

Форма отображается в HTML (консоли) на «добавить», а также, но якобы на том месте.

При нажатии на эту ссылку:

<a> 
<span class="sidebar-text">{{ trans('common.projects') }} 
    ({{ count($projectsNav) }})</span> <span class=" pull-right"> <i 
      href="/user/invite" 
      class="fa fa-cog nopadding" data-toggle="modal" 
      data-target="#modal-basic" 
      style="padding: none !important;"></i> 
</span> 
</a> 

Это должно вызвать это:

JavaScript

// Support for AJAX loaded modal window. 
// Focuses on first input textbox after it loads the window. 
$('[data-toggle="modal"]').click(function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    if (url.indexOf('#') == 0) { 
     $(url).modal('open'); 
    } else { 
     $.ajax({ 
      url: "/user/invite", 
      headers: AjaxHeader, 
      method: "POST", 

      success: function (response) { 
       $('<div class="modal hide fade">' + response + '</div>').modal(); 
      } 
     }); 
     /* $.post(url, function(data) { 
      $('<div class="modal hide fade">' + data + '</div>').modal(); 
     }).success(function() { $('input:text:visible:first').focus(); });*/ 
    } 

Маршрут

Route::post('user/invite', 'UserController@showInvite'); 

Контроллер

public function showInvite(UserTypeController $userType) 
{ 
    $usertypes = $userType->getUsertypes(); 

    return view('user.invite', compact('usertypes')); 
} 

Лопасть/Модальные формы

<div class="modal fade test" id="modal-basic" tabindex="-1" role="dialog" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" 
        aria-hidden="true">&times;</button> 
      <h4 class="modal-title text-capitalize">{{trans('common.invite_user')}}</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-md-12 col-sm-12 col-xs-12"> 
         <div class="form-group"> 
          <label class="form-label text-capitalize">{{trans('common.email')}}</label> 

          <div class="controls"> 
           {!! Form::text('email', null , ["class"=>"form-control col-sm-9" ,"id"=>"email" ,"placeholder" => 
           trans('common.email') ]) !!} 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12 col-sm-12 col-xs-12"> 
         <div class="form-group"> 
          <label class="form-label text-capitalize">{{trans('common.email')}}</label> 

          <div class="controls"> 
           {!!Form::select("usertype_id", $usertypes , null , 
           ['data-live-search'=>"true",'class'=>'selectpicker'])!!} 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

     </div> 
     <div class="modal-footer"> 
      {!! Form::submit(trans('common.invite'), ["class"=>"btn btn-success text-capitalize", "id"=>"inviteUser", "data-dismiss"=>"modal"]) !!} 
     </div> 
    </div> 
</div> 

Answer 1

Вы должны загрузить модальность в ваш HTML. Раствор для этого было бы:

Шаг 1

Добавьте Див модальный контейнер непосредственно вручную на ваш HTML, где вы хотели бы, чтобы объявление модальный.

<div class="modal hide fade"></div> 

Шаг 2

нагрузки модальная в ваш ранее созданный контейнер:

$('[data-toggle="modal"]').click(function(e) { 
    e.preventDefault(); 

    // Get the partial view to show in modal 
    var $modal = $('.modal'); 
    $modal.load('/user/invite', function() {}); // this will load the returned html into your modal container 
    $modal.modal('show'); // show the modal 
} 

UPDATE

Удалить внешний модальный DIV из вашего ответа, потому что у вас есть 2 корень .modal контейнеров.

Answer 2

Изменить

success: function (response) { 
    $('<div class="modal hide fade">' + response + '</div>').modal(); 
} 

в

success: function (response) { 
    $(response).modal(); 
} 

куб.см: см Mivaweb «s ответ