Laravel应用程序中的Bootstrap模态窗口未显示

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