php - 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

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

项目 Controller .php

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

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

Answer 1

您需要在链接中指定 html id 标记。
我建议你试试这个

<a data-toggle="modal" id="smallButton" data-target="#smallModal"
 data-attr="{{ route('projects.show', $project->id) }}" title="show">
 <i class="fas fa-eye text-success  fa-lg"></i>
</a>

<!-- small modal -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="smallBody">
                <div>
                    <!-- the result to be displayed apply here -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // display a modal (small modal)
    $(document).on('click', '#smallButton', function(event) {
        event.preventDefault();
        let href = $(this).attr('data-attr');
        $.ajax({
            url: href,
            beforeSend: function() {
                $('#loader').show();
            },
            // return the result
            success: function(result) {
                $('#smallModal').modal("show");
                $('#smallBody').html(result).show();
            },
            complete: function() {
                $('#loader').hide();
            },
            error: function(jqXHR, testStatus, error) {
                console.log(error);
                alert("Page " + href + " cannot open. Error:" + error);
                $('#loader').hide();
            },
            timeout: 8000
        })
    });
  </script>