Модальное окно начальной загрузки в приложении Laravel не отображается

Question

Я пишу приложение Laravel и пытаюсь реализовать модальное отображение некоторых деталей элемента.Когда я нажимаю на ссылку, отображается фон, но не модальное окно.В сетевом мониторе Chrome он показывает модальное окно в превью.

Что не так?

Заранее благодарю за помощь!

Вот мой код

index.blade.php

<td>
<a href="{{ route('projects.show', $project->id) }}" class="btn btn-info" data-remote="true">Details</a>
</td>

modal.blade.php

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">@yield('title')</h5>
        </div>
        <div class="modal-body">
          @yield('content')
        </div>
        <div class="modal-footer">
          @yield('footer')
        </div>
    </div>
</div>

show.blade.php

@extends('layouts.modal')
@section('title')
Demo Modal
@endsection
@section('content')
<p>test</p>
@endsection
@section('footer')
    <button type="button" data-dismiss="modal">Close</button>
@endsection

remote.js

$(document).on('ajax:success', function(e, xhr){
    if(!$('#modal').length){
        $('body').append($('<div class="modal" id="modal"></div>'))
    }
   $('#modal').html(xhr.responseText).modal('show');
});

ProjectController.php

public function show($id)
    {
        $project = Project::findOrFail($id);

        return view('projects.show', compact('project'));
    }